flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
有时候会被别人问起pc端和手机端有什么区别。一般来说都会去说，兼容性啊，适配啊，网页布局这方面的事情，但是我觉得这个问题如果想要拿一个满分应该从区别出发，从如何判断收尾。毕竟你只知道区别没有用，他可能更想让你说出来你是怎么判断的。
电脑版的商城昨晚做完了，今天赶着做手机端的，提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度，保证在不同手机上都能正常显示给用户，我之前做这类网站都是无脑引进bootstrap的。但前一个项目做完之后我发现bootstrap虽好，但里面的各种样式我利用的很少，最多用到它排版，当网站最后上传的时候你会发现，即使压缩之后，它也会占用相当大的一部分，所以这次我想自己用原生写，响应式开发（我现在知道的尚浅）目前我了解有
[总结]我对移动端适配的了解 不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。 我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间，到了移动端，面对webkit内核的Safari与Chrome会舒心很多。b
利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有 width、height、padding、margin，其他属性比如 border、font-size 不能用百分比设置的，先看一个简单例子：
移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。
代码已上传至github github代码地址：https://github.com/Miofly/mio.git
方式一：用媒体查询"@media"，这种写法好处是可以对不同分辨率的设备，展示完全不同的UI界面，一个页面不同的设备看的时候，展示内容可以不一样，交互方式可以不一样。不过这个不方便用在复杂的地方，而且不同的分辨率都需要对应的重新写样式，同一个页面集合太多的这种写法，最好是分开写两套，降低耦合性。但是这种写法费力不讨好，之前有的网站在PC和手机查看到的样式不一致，用了一些这个技术，但是后来很多都是检测到不同设备，就跳转到不同的网页上去了。
基于vue-cli3.0+webpack 4+vant ui + less+ rem适配方案+axios封装，构建手机端模板脚手架
这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。
css 样式重置实质上就是对不同浏览器的样式使用一个统一的标准，他的目的在于减少 css 的样式代码。css reset 也有比较常见的“库”，比如，normalize.css 或者是 meyerweb.css。在早期的一些简单的项目开发，css reset 直接可以了引用这样的文件，因为这是一些比较标准的写法。
现在手机、电脑、ipad成为了每个家庭必备内容，但是通常设计给到我们的都是一个固定大小的UI，如果用户是一个屏幕小或者大的设备，一般就会出现滚动条或者大片空白内容，为了更好的利用一些空间，或者在各种屏幕上都有一个较好的体验，出现了网页设计的概念，自适应的概念，也就是随着屏幕尺寸的不同能够适配各种内容
很多人会对响应式布局和自适应式布局产生混淆，这两者到底有着什么样的区别呢？因为不同于移动站，就事一个独立的站点，每个模块都有独立接口，但是Google一直以来就是推荐响应式设计的，至于为什么你可以参考此篇文章：移动端网站怎样做SEO优化？我们今天就来了解下二者之间是责骂定义的。
响应式布局 是 Ethan Marcotte 在 2010年5月份 提出的一个概念，简而言之，就是 一个网站能够兼容多个终端 ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验 ，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
---- 💅文章概要： 各位C站的小伙伴们，你想要获得一款精美的响应式登录页面吗！收藏我并且关注博主，让我们拿起电脑一起练，一路火光带闪电！无论是电脑，手机还是平板都可以完美适配哦！ ---- 🤟每日一言： 你可以遗憾，但是你绝对不能后悔。遗憾证明你努力过了，只是力有不逮。而后悔，只能说明你当时没努力过。 ---- 目录 前言 响应式布局介绍 响应式登陆页面效果演示 PC端效果演示 手机端效果演示 IPAD竖屏效果演示 IPAD横屏效果演示 实现思路 背景的设置 HTM
9月初就申请了 掘金小册子，到现在也没审核通过，只能将此项目的文字教程发布到小专栏了， 小专栏地址
💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。 💅文章概要： 各位C站的小伙伴们，马上就要迎来我们一年一度的元旦和春节啦，值此之际，让我们一起来写一个响应式跨年倒计时吧！无论是电脑，手机还是平板都可以完美适配哦！ 🤟每日一言：
准备编辑这段时发现简书上已经有作者写了关于rem布局的介绍，并且他的设置比我所用的更加简洁，贴上地址供大家学习参考。 手机端页面自适应解决方案—rem布局进阶版（附源码示例）
移动端网页的宽度 就是 屏幕宽度 , 不需要设置版心宽度 , 但是 页面必须进行尺寸适配 , 这就引入了如下几种页面布局方式 :
PC端页面的网页重构，我们使用最多的单位是px。因为在PC端，大部分页面效果我们都可以设置成固定尺寸，但是在手机端，这种方案是不可行的，我们必须要按照百分比呈现页面，才能保证网页在任何设备上可以正常显示。
也许你还没有过多的思考过手机页面与pc页面的差别，也没从产品角度思考过从产品设计上两者有什么不同，那么不妨跟小编一起去思考下，也许能给你一些有益的启示。
移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。
很多人聊起移动端适配都是懵逼状态，都想口吐芬芳。难道移动端还要适配，直接px写死，其他自适应不就完了吗？其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生
网站的index页面修改了原来的泛用title(dreamcenter)，改成了现在更有利于检索排名的标题。并且设置了keywords和description的meta元数据。期待这些天百度搜索资源平台能够快速创建新的快照吧！不过就项目前端是vue，导致博客页的文章收录成为了一个非常棘手的问题，也就是博客文章无法被百度抓到，如果使用nuxt服务器端渲染返回也是一个麻烦的事情，不仅要改代码，还吃服务器性能。预渲染对于这种动态生成的页面也不是非常适合，现在局面就挺尴尬的。就只能简单的将首页一点点数据收录了。
目前移动端的适配方案一般就是两种，一个是rem方案，一个就是vw的方案，本篇就是一次性讲清楚如何去运用这两种方案来解决问题。 panda-vue-template 手把手搭建vue小商城2.0 1、关于rem rem的原理什么的我就不说了，网上搜文章一搜一大把。 一般是使用手淘的lib-flexible.js，但是这个作为一种过渡方案已经被废弃了，目前已不推荐在你的新项目中使用这个方案来解决手机适配问题。 感兴趣可以看看我老早以前写的这篇-->手机适配问题之rem和lib-flexible,我
响应式网站:即pc和移动端共用一套网站，只不过在不同宽度的屏幕下，样式会自动适配。配合媒体查询监听，通过判断屏幕宽度来改变样式，以适应不同终端。例如：三星电子官网: www.samsung.com/cn/ 缺点:制作麻烦，需要花很大精力去调兼容性问题
其实，我们可能经常在聊组件化，咋地咋地。但是，回过头来思考一下，如果你看到一张设计稿的时候，连布局都不清不楚，谈何组件化呢。所以，我们需要在分清楚组件之前，先来分清楚布局。废话说了这么多，只是想告诉你，布局这个东西真的很重要。本篇内容概括了布局的基础+基本的PC端布局+移动端适配等内容。如果你喜欢我的文章，欢迎评论，欢迎Star~。欢迎关注我的github博客
移动端布局中，童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配。那么来讲讲rem在其中起的作用和如何动态设置rem的值。
由于现在众多移动设备的兴起，各种手机厂商推出了许多不同屏幕尺寸大小的手机型号，前端人员在编写代码时就需要适配各种手机屏幕。
前端涉及到的领域不单单只是PC浏览器了，现在是移动为王的时代，所以大部分的时候还是在做移动端的页面适配。所以这里记录一下在移动端开发的时候遇到的一些问题。
说实话，我一点都不想了解这些名词到底有着什么样的解释，只想知道怎么让开发的页面能适配不同的移动端设备。简单点说，我想知道怎么获取设备的真实开发尺寸（根据这几天查资料所得，这个概念叫逻辑像素）。
就当写一篇随笔吧~上星期还在做加盟模块(兼容微信端)，这星期已经加班做快递扫码模块(react+node)，所以我感觉只有弹药备足了才能稍微轻松些应对各种需求。实话说在同个部门的大佬面前差距确实大，如何判断差距呢？我的观点是一是效率，二是质量。Fe这行，如果给你个需求写出个怎么怎么样的界面，我觉得任何人学几个星期肯定都会了，但是能否完成一个具有大局观的界面呢？包括兼容性、自适应，最重要的是扩展性如何呢？(js的封装、抽离，图片、css、js的压缩等等)。部门一些大佬的代码习惯很有个性，但是让人看起来是非常友
涉及到网站需同时兼容 PC 和移动端情况更甚：px、百分比、em、rem、vw etc.
该方案使用相当简单，把下面这段已压缩过的 原生JS（仅1kb，源码已在文章底部更新，2017/5/3） 放到 HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置），此方案仅适用于移动端web
移动端web页面的开发适配一直是前端开发津津乐道的话题，在实际开发过程中，移动端和PC端web页面的差异不仅仅体现在设备宽度的不同。由于项目历史背景的原因，下文的方案是团队选择的能较好满足当前项目需求的方案，已经经过线上用户的考验，但不一定是当下最完美的移动端适配解决方案。下文来详细介绍该方案选型。
编写插件需要使用图片资源又不适合直接引入时使用base64图片编码进css或js插件
屏幕大小指屏幕的对角线的长度，单位一般是英寸。常见的手机屏幕大小 3.5、4、4.7、5.0、5.5、6.0等。常见手机屏幕查看网址 http://screensiz.es/
一、背景 01 什么是实时音视频（RTC） 实时音视频（Real-Time Communication，简称RTC），从字面上理解就是实时的进行音频和视频的交流，最主要的特点就是“实时”。这里的实时性可以分为三个档次： 腾讯云实时音视频 TRTC 延时已经可以做到300ms以下，我们常见的QQ和腾讯会议上的语音通话、视频通话，都是实时音视频的应用场景。 首先，我们来了解下为什么会产生延时。以QQ为例，两个QQ用户通过外网发起语音通话，主叫方语音呼叫接听方，这个过程一般会分为两层来处理。一个是信令层
WordPress响应式免费主题，一款基于Js+jquery2.1.4+H5/CSS3响应式+Wordpress后台开发，每天活人访问量500-800+IP，百度权重2，百度、Google收录链接突破1800+条，前后端完全独立制作，现主题作者Art_Blog开源给所有小伙伴免费使用！
💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。 💅文章概要： 各位C站的小伙伴们，你想要获得一款精美的响应式登录页面吗！收藏我并且关注博主，让我们拿起电脑一起练，一路火光带闪电！无论是电脑，手机还是平板都可以完美适配哦！ 🤟每日
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。看到问题了吗？一个宽度只有375像素的手机，却能够显示宽度为980像素的网页，自然而然，网页会被缩小。
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
假设 html 的 font size = 1px 的话，就可以写 28 rem 了，更方便了，但是浏览器对字体大小有限制，设为 1px 的话，在浏览器中是失效的，会以 12px（或者其他值） 做一个计算 , 就会得到一个很夸张的结果，所以可以把 html 写的大一些。
前端代码的编写永远逃不过“兼容”二词，从前PC时代，因为IE的傲娇，导致程序猿们一直在兼容IE的道路上挣扎，如今移动设备的普及，仿佛让我们看到了希望，仿佛马上就要摆脱IE了，可是！一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢~ 话不多说，下面就总结了一些移动端常用的适配手法：
手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者视觉上有特殊要求的，就需要通过其他手段来解决了。
6月29日，音视频及融合通信技术技术沙龙圆满落幕。本期沙龙特邀请腾讯云技术专家分享关于最新的低延迟技术、全新的商业直播方案等话题，针对腾讯云音视频及融合通信产品的技术全面剖析，为大家带来纯干货的技术分享。下面是颜学伟老师关于实时音频与传统PSTN语音业务如何融合在一起，以及融合过程中的碰到的难点和解决方案的分享。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
