一.怎么让H5页面适应手机
a.利用meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
解释：Viewport指用户网页的可视区域，content中的“width”指的是虚拟窗口宽度，上面代码意为虚拟窗口/页面宽度初始比例为1，最小比例为1，最大比例为1，用户不可扩展，页面不可缩放。
<meta name="apple-mobile-web-app-capable" content="yes">
解释：添加到主屏幕后，全屏显示。
<meta name="apple-mobile-web-app-status-bar-style" content="black">
解释：作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
b.百分比法
CSS中的百分比中指的是相对于父元素的宽度。子元素盒子width最好使用百分比来写，能最大可能的适应各种屏幕，但这只适合布局简单的页面，复杂的页面实现很困难。
c.使用css3的单位rem
rem是个单位，单位大小由它第一代老祖宗的font-size的大小决定。在页面载入开始时首先判断window的宽度（是window的宽度($(window).width())，不是屏幕分辩率的宽度（screen.width），两者差别请自行查阅），然后计算得出换算比例，等下下方会贴出相应的计算代码。
二.自适应动态设置html
例如以屏幕320像素为基准:
html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
方法1：使用媒体查询换算出各分辨率的比例
@media screen and (min-320px) and (max-359px) and (orientation:portrait) { html { font-size: 625%; } } @media screen and (min-360px) and (max-374px) and (orientation:portrait) { html { font-size: 703%; } } @media screen and (min-375px) and (max-383px) and (orientation:portrait) { html { font-size: 732.4%; } } @media screen and (min-384px) and (max-399px) and (orientation:portrait) { html { font-size: 750%; } } @media screen and (min-400px) and (max-413px) and (orientation:portrait) { html { font-size: 781.25%; } } @media screen and (min-414px) and (max-431px) and (orientation:portrait){ html { font-size: 808.6%; } } @media screen and (min-432px) and (max-479px) and (orientation:portrait){ html { font-size: 843.75%; } }
然后，设计稿px换算直接/100即可得到rem值。然而，这种方法初略计算大致的范围，只能解决一部分的情况，并不能完全适配，不建议使用；
方法二：根据屏幕分辨率来换算比例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>rem字体大小自适应</title> <link rel="stylesheet" href="css/reset.css" type="text/css"><!--此处是我全局css代码，清除默认样式，无影响--> <style> .ending_box{ position: absolute; top:0; left: 0; width: 100%; height: 100%; } .ending_con{ position: absolute; top: 50%; left: 50%; width: 5rem; height: 6rem; margin-left: -2.5rem; margin-top: -3rem; } .ending_con .ending_img{ margin: 0 auto; } .ending_con .ending_img img{ width: 100%; } .ending_con .ending_txt{ text-align: center; line-height: 0.6rem; font-size: 0.32rem; color:#333; margin-top: 0.5rem; letter-spacing: 2px; } </style> <script> (function(win, designW) { var doc = win.document; var docEle = doc.documentElement; designW = designW || 640; //设计稿宽度px,默认640px设计稿 var ratio = designW / 100;//640px=> 1rem = 100px, 超出640px font-size：100px; var or = "orientationchange" in win ? "orientationchange" : "resize"; //创建viewport _createViewport(); if(doc.addEventListener){ win.addEventListener(or, _refreshRem, false); doc.addEventListener("DOMContentLoaded", _refreshRem, false); } /** * 创建viewport */ function _createViewport(){ var metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'); if (docEle.firstElementChild) { docEle.firstElementChild.appendChild(metaEl); } } /** * 动态更新rem */ function _refreshRem() { var clientW = docEle.clientWidth || 320; //设置最大和最小宽度取值 if(clientW > designW){ clientW = designW } else if(clientW<320){ clientW=320; } docEle.style.fontSize = clientW / ratio + "px"; }; })(window, 750);//750为设计稿宽度px值,根据实际设计稿大小对应设置 </script> </head> <body> <div class="ending_box" q-ctrl="endingCtrl"> <div class="ending_con"> <p class="ending_img"> <img src="https://www.cnblogs.com/images/cnblogs_com/hejun26/1310858/o_longmao.jpg"/> </p> <p class="ending_txt">这里是测试的图片和文字,请切换屏幕大小查看效果！</p> </div> </div> </body> </html>
然后按照750的设计稿，设计稿px换算直接/100即可得到rem值。
注：后期发现一个编写错误，设计稿px/100得出我们的rem的值。
方法三：百分比+弹性盒布局
不管是用哪种布局我都习惯性用弹性盒布局，display:flex,我觉得相当的美好，不用一点点的去量宽度，而且可以替换浮动，也不用清除浮动，不管是PC还是移动都是不错的，有时候懒得用rem我就是用百分比+弹性盒，但是，各位请注意，兼容性问题考虑一下，弹性盒的集中兼容写法注意一下，手机端感觉是各种通用的，浏览器兼容一般，主流OK的，但是IE10以下估计完蛋。
a.有6个属性作用在父盒子box上，对子盒子起作用
1. flex-direction 决定主轴的对齐方向，分别有四个属性：
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
2. flex-wrap ：定义子元素超过一行，如何换行，分别有三个属性：
nowrap（默认值）：默认不换行。
wrap：换行，第二行在第一行下面，从左到右
wrap-reverse：换行，第二行在第一行上面，从左到右；
3. flex-flow:是flex-direction 和flex-wrap的简写形式，默认是 row nowrap：
4. justify-content: 子元素在主轴对齐方式：
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
5. align-items：交叉轴如何对齐，如果flex-direction：row和row-reverse 那么交叉轴就是y轴，如果是column和column-reverse那么交叉轴是x轴：
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6. align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
b.有一个常用的属性作用在子盒子上
1.flex-grow 放大比例 默认是0 当有放大空间的时候，值越大，放大的比例越大：
flex-grow: 1;