13518219792
1、在HTML头部增加viewport标签。 在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下： meta name="viewport" content="width=device-width, initial-scale=1" / 这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。 2、在CSS文件尾部增加针对不同屏幕分辨率的规则。 例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。 @media screen and (max-device-width: 480px) {#divMain{float: none;width:auto;}#divSidebar {display:none;} } 3、布局宽度使用相对宽度。 网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。 4、页面使用相对字体（非必要） 在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。 5、图片自适应（非必要） img标签的话，只需要设置 max-width: 100%;或width:100%; 语句为：img { max-width: 98%; } css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，添加如下语句：background-size:100% 100%; 根据上面讲述的几点内容，我针对我博客的CSS进行了一些修改，发现可以从iPhone手机浏览到体验更佳的页面，但有一个问题没有解决，就是顶部导航栏navbar显示有问题，换行后被下面的文章盖住了，不知道怎样能更好地解决这个问题（更新：经过网友提示，在导航栏divNavbar的样式里，加入 white-space:nowrap; overflow:hidden; 即可解决这个问题）。
创新互联是一家专业提供平乡企业网站建设,专注与成都网站设计、成都网站制作、外贸网站建设、H5建站、小程序制作等业务。10年已为平乡众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
有的，搜索“网站采集工具”就有一大堆，但是不推荐。用心去做的网站永远比自动更新的强。
没有人喜欢看重复的内容。
原创就是力量！
px、em、rem
px 是固定的长度单位
em 是父元素的font-size(字体大小)的值，常用来设置首行缩进2em(2字符)
rem 是根节点(html，body)的font-size(字体大小)的值，可以用来做移动端的自适应。
为什么要适配移动端
px像素(pixel)
相对长度单位。相对于显示器屏幕分辨率而言。PC端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem
em
相对于父节点的font-size，会有一些组合的问题。比如你把body的font-size定义为50%，一般地会是8px。
那么你在body里字体大小就是 1em=8px
可当你定义了一个div，然后把字体设置成了75%，请问，现在的1em等于多少？
这个时候你会发现，原来他继承了body的值，现在字体更小了，变成了6px！
因为em是相对于父节点的单位，这么嵌套下去，你要数嵌套层级和比例，你会哭的饿...... (幸好出现了rem)
rem
相对长度单位，指相对于根元素的字体大小的单位。
rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。
使用的时候不需要重新计算rem此时的大小。
rem因为是css3增加的，所以ie8或以下请无视。
屏幕适配的几种方法(流式布局、固定宽度、响应式、通过viewport进行缩放、使用rem)
1、流式布局
在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点
往往只有几个尺寸的手机下看到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。
流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。
2、固定宽度
把页面设置成320的宽度，超出部分留白，这样做视觉，前端设计都挺挺开心，UI再也不用被流式布局限制自己的设计灵感了，前端也不用流式布局。
但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，浪费了宝贵的可用空间(放几个广告也好啊，我错了...)
还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小
3、响应式
响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性
难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样
反而可以节约成本，不用再专门为自己的网站做一个web、app的版本。
4、通过viewport进行缩放
以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。
说实话，我觉得他和用接下去我们要讲的rem都非常高效，不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。
5、使用 rem 相对字体
rem 等比例适配所有屏幕，通过js来判断当前屏幕大小，进而设置html的font-size
代码里面rem的值就是Ui设计稿上量的px除以100就是你代码中要写的rem值。
(function(){
var currClientWidth,
fontValue,
originWidth;
originWidth = 750;//ui设计稿的宽度，一般750或640
__resize();
window.addEventListener('resize', __resize, false);
function __resize() {
currClientWidth = document.documentElement.clientWidth;
if (currClientWidth 768){
currClientWidth = 768;
}
if (currClientWidth 320){
currClientWidth = 320;
}
fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);
document.documentElement.style.fontSize = fontValue + '%';
}
})();
// 当前假如当前分辨率是375， 设计稿分辨率是750
// 750/375=0.5
// 比例关系是0.5倍
// 再算一下你要换算1rem等于多少px，
// 假如我要100， 100/16=6.25
// 把这个换算的乘以刚才得出的比例
// 0.5*625=312.5
// 最后还拼接了一个百分号 = 312.5%
// 就是在375分辨率下 1rem = 312.5%
// 312.5% * 16px = 50px
前端设置使用 rem 最经典代码
下面代码在是中国平安工作时，身边的一个同事写的，兼容性特别好,移动端建议使用。
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window)
代码说明：
docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
例如：手机竖屏的宽度为 750px，则 fontSize = 50 * (750 / 375) = 100px
像素就可以直接使用rem，比如 font-size: 0.2rem; 即 font-size: 20px;
rem 做移动端适配
一般长度最好是除得尽的数值，例如40，50。
mimvp blog
var html = document.documentElement;
var htmlWidth = document.documentElement.clientWidth;
//html.style.fontSize = htmlWidth/27+'px'; //如：设计图1080宽度，将屏幕分为27份，每份为设计图的40px
html.style.fontSize = htmlWidth/15+'px'; //如：设计图750宽度，将屏幕分为15份，每份为设计图的50px
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 7.5rem; /* 相当于设计图上的7.5*50px 设置的值=设计图上的长度/每份的长度 */
height: 2.5rem; /* 相当于设计图上的2.5*50px */
border: 1px solid #000;
}
代码说明：
//html.style.fontSize = htmlWidth/27+'px'; // 如：设计图1080宽度，将屏幕分为27份，每份为设计图的40px
html.style.fontSize = htmlWidth/15+'px'; // 如：设计图750宽度，将屏幕分为15份，每份为设计图的50px
width: 7.5rem; /* 相当于设计图上的7.5*50px 设置的值=设计图上的长度/每份的长度 */
height: 2.5rem; /* 相当于设计图上的2.5*50px */
对于需要在移动端展示的页面来说，由于移动设备各种各样，展现效果也就有了很大的不同，所以做移动端适配是个费劲但是又不得不做的事情。那么我们来说一下如何去应对这种情况。
对于移动端适配，要从2个角度去考虑：
第一个就是需要根据分辨率不同自适应页面大小
第二个是对于刘海屏的特殊处理
所以我们需要使用2套方案来完成移动端的适配
网上有大量的文章来讲分辨率自适应方案，比如rem计算font-size字体大小来作为单位进行像素的换算，比如使用css3新的语法 vw vh 等等百分比单位来计算，等等。相信如果一个新手来看这一堆东西，估计会蒙半天，特别是rem的计算方式，太过繁杂。
根据我花费了大量时间之后总结出来的经验，我最终确定了一个方案来实现。我觉得这个是目前还算简便的方式，所以记录在这里。那就是 ----- 利用scss函数方式 结合 vw vh 百分比显示
通常我们会拿到一个UI设计稿，UI设计稿上会有设计时屏幕的宽高（如果没有UI稿就自己确定一个长宽就可以了）
理解起来非常简单：就2步
如此设置，不管在小屏，大屏，手机，平板，pc， 都会按比例缩放显示元素了
关于刘海屏，等异形屏，我的首要建议就是对于能够从UI设计上就能预留出刘海高度的，最好能直接预留出高度设计。这样就不需要做异形屏幕的适配。
正常来说，我们的页面会分为以下两种情况
对于其中参数不明白的，可以参考其他教程中的解释，在此我就不再赘述了，比如在文章底部列出的参考文章。
这样就实现了屏幕的适配
结语：屏幕适配的各种兼容情况层出不穷，我这套方案应该也会有不兼容的情况出现，所以如果有更好的解决方案欢迎大家留言。对于一些 constant env calc safe-area-inset-bottom 等等这些语法不熟悉的话，大家可以去搜索下，一搜就有。希望这套方案足够简洁明了，能够帮助到一些想快速实现的朋友。
感谢其他作者宝贵的经验和参考：
- 有关viewport的介绍
- 菜鸟课堂 有关@media的各种参数的整理介绍
- 对于@supports方法的展示
- 对于@media的应用
- 对于@media的应用
...
