个人通过学习总结了一下现移动端网页适配方案，如有错误或补充往各位大神给小女子指点一二。
淘宝移动端布局方式为例
1.Viewport设置
<--!HTML部分-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
通过js动态设置viewport
//js代码
meta.setAttribute(\'content\', \'initial-scale=\' + 1/dpr + \', maximum-scale=\' + 1/dpr + \', minimum-scale=\' + 1/dpr +\', user-scalable=no\');
2.rem+js（通过js自动获取设备宽度，计算得到相应设备下html的font-size值达到自适应）
js代码部分
function font(w) { var w = w || 640, docEl = document.documentElement, resizeEvt = \'orientationchange\' in window ? \'orientationchange\' : \'resize\', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / w) + \'px\'; }; if (!document.addEventListener) return; window.addEventListener(resizeEvt, recalc, false); document.addEventListener(\'DOMContentLoaded\', recalc, false); } font(); (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 = 100 * (clientWidth / 640) + \'px\'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener(\'DOMContentLoaded\', recalc, false); })(document, window);
1.获取手机宽度,分成10份,每一份为rem的尺寸.使用media设置rem的值
@media all {html {font-size: 16px;}}
@media all and (min-width: 140px) and (min-height: 220px) {html {font-size: 9px;}}
@media all and (min-width: 220px) and (min-height: 140px) {html {font-size: 9px;}}
@media all and (min-width: 210px) and (min-height: 280px) , (min-width: 280px) and (min-height: 210px) , (min-width: 280px) and (min-height: 280px) {html {font-size: 16px;}}
@media all and (min-width: 300px) and (min-height: 460px) , (min-width: 460px) and (min-height: 300px) {html {font-size: 16px;}}
@media all and (min-width: 340px) and (min-height: 620px) , (min-width: 620px) and (min-height: 340px) {html {font-size: 16px;}}
@media all and (min-width: 420px) and (min-height: 760px) and (max-height: 900px) , (min-width: 760px) and (max-width: 900px) and (min-height: 420px) {html {font-size: 24px;}}
@media all and (min-width: 500px) and (min-height: 900px) , (min-width: 900px) and (min-height: 500px) {html {font-size: 28px;}}
@media all and (min-width: 1000px) and (min-height: 740px) , (min-width: 740px) and (min-height: 1000px) {html {font-size: 20px;}}
@media all and (min-width: 1200px) and (min-height: 600px) , (min-width: 600px) and (min-height: 1200px) {html {font-size: 32px;}}
@media all and (min-width: 1280px) and (min-height: 720px) , (min-width: 720px) and (min-height: 1280px) {html {font-size: 32px;}}
@media all and (min-width: 1000px) and (min-height: 1900px) , (min-width: 1900px) and (min-height: 1000px) {html {font-size: 48px;}}
/* 兼容iphone6*/
@media (device-width: 375px) and (device-height: 667px) and (-webkit-min-device-pixel-ratio: 2.0) {html {font-size: 16px;}}
/* 兼容iphone6 plus */
@media (device-width: 414px) and (device-height: 736px) and (-webkit-min-device-pixel-ratio: 3.0) {
html {font-size: 16px;}}
@media all and (device-height: 1080px) and (device-width: 1920px) , (device-width: 1080px) and (device-height: 1920px) {html {font-size: 24px;}}
/*兼容letv等*/
@media all and (device-width: 1080px) and (device-height: 1920px) and (-webkit-min-device-pixel-ratio: 2.0) {html {font-size: 48px;}}
/*兼容小米4等*/
@media all and (device-width: 1080px) and (device-height: 1920px) and (-webkit-min-device-pixel-ratio: 3.0) {html {font-size: 48px;}}
@media all and (device-height: 1280px) , (device-width: 720px) {html {font-size: 32px;}}
@media all and (device-width: 1024px) , (device-width: 768px) {html {font-size: 20px;}}
@media all and (device-width: 960px) and (device-height: 640px) , (device-width: 640px) and (device-height: 960px) {html {font-size: 32px;}}
@media all and (device-width: 480px) and (min-device-height: 800px) and (max-device-height: 900px) , (min-device-width: 800px) and (max-device-width: 900px) and (device-height: 480px) {html {font-size: 24px;}
@media all and (device-width: 360px) and (device-height: 640px) , (device-width: 640px) and (device-height: 360px) {html {font-size: 20px;}}
@media all and (device-width: 320px) and (device-height: 480px) , (device-width: 480px) and (device-height: 320px) {html {font-size: 16px;}}
@media all and (device-width: 240px) and (device-height: 320px) , (device-width: 320px) and (device-height: 240px) , (device-width: 320px) and (device-height: 320px) {html {font-size: 16px;}}
/*魅族MX3 */
@media all and (device-width: 1080px) and (device-height: 1800px) {html {font-size: 42px;}}
/*魅族MX4 pro*/
@media all and (device-width: 1536px) and (device-height: 2560px) {html {font-size: 58px;}}/
*三星note4 */
@media all and (device-width: 1440px) and (device-height: 2560px) {html {font-size: 58px;}}
3.将px转换为rem,写入css布局样式中
天猫布局为例
1.Scale=1.0写死viewport
2.采用flex布局方式.
3.rem确定非flex的元素
flex布局方式:现在 pc 端支持的不好（主要是因为还有很多 IE8，9的用户存在。）移动端使用flex布局(使用时添加厂商前缀)
例如:
/*--只需父元素设置--*/
{display:-webkit-box; /*android2.1-3.0 ios 3.2-4.3*/display:-moz-box; /*firefox*/display:-webkit-flex; /*chrome 21+*/ display:-ms-flexbox; /*wp ie 10*/display:flex; /*android 4.4*/}
/*--然后子元素设置相应的比例--*/
{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
手机携程布局为例
1.采用scale=1.0,写死viewport
2.Px+百分比布局
缺点:百分比布局高度没办法设置.
引用一些UI框架,以bootstrap和MUI为例
一 :bootstrap框架
bootstrap提供了具有响应式效果的一些UI的组件,可实现在移动端和PC端都可以适配的网页.
响应式布局原理
@media only screen and (max-width: 768px) {//超小型设备/手机移动设备
样式代码
}
@media only screen and (min-width: 768px)and (max-width: 992px) {
//小型设备 平板
样式代码
}
@media only screen and (min-width: 992px)and (max-width: 1200px) {
//中型设备 pc电脑
样式代码
}
@media only screen and (min-width: 1200px){
//大型设备 宽屏电脑 TV
样式代码
}
优点
不仅在不同的屏幕下达到自适应，还会在相应的屏幕下对页面布局，样式做出相应的调整
缺点
兼容各种设备工作量大，效率低下；代码累赘，，加载时间过长；一定程度上改变了网站原有的布局结构
MUI框架
MUI最接近原生APP体验的高性能前端框架,也可以书写移动端页面.mui不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K.比较轻量,可适用不同系统,不同屏幕的设备.利用Huilder写mui方便快捷,减少工程量.但MUI尚不成熟,存在的问题还很多.
其他方面
图片自适应问题,例子
Css样式
.img-wrap { display: inline-block; } .img-wrap img { width: 100%; vertical-align: middle; }
HTML代码
<div class="img-wrap">
<img src="imgs/560x200.jpg" alt="">
</div>
<div class="img-wrap">
<img src="imgs/440x200.jpg" alt="">
</div>
<div class="img-wrap">
<img src="imgs/300x200.jpg" alt="">
</div>
关于字体大小 rem
rem相对长度单位。使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
在css中的html选择器中声明font-size=62.5%，这就使rem值变为 16px*62.5%=10px, 这样12px=1.2rem, 10px=1rem,.
用scss样式
@function px2rem($px){ @return ($px/10)/2 + rem; // 相当于$px/20 +rem } width:px2rem(100px); //5rem height:px2rem(200px); //10rem
设置根节点font-size值的方法，第一种是使用css的Media queries，示例代码如下：
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ html{font-size: 37.5px;} }
什么情况下使用rem来布局和注意的问题
整体的布局还是使用百分比
使用rem的最佳场景是需要图片固定宽高比.
出现1px像素线的地方，仍旧使用border-width:1px;而不是border-width:.1rem;