移动端的适配问题

什么是Viewport?

viewport 属性是相对于移动端来说的。
meta viewport 的6个属性:

• width ： 设置viewport 的宽度，默认视口宽度
• height： 设置viewport 的高度
• initial-scale ： 设置页面的初始缩放值
• minimum-scale ：允许用户的最小缩放值
• maximum-scale：允许用户的最大缩放值
• user-scalable： 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

针对IE做兼容性

为防止IE的实际浏览器模式默认较低，需要设置IE渲染方式为最新（ edge ）

<meta http-equiv="X-UA-Compatible" content="IE=edge">

b. IE9以下不支持HTML5、不支持CSS3 @Media，所以需要加载两个JS文件，来保证代码实现兼容

<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

媒体查询语法

• 媒体类型 media type
• 媒体连接 and not only
• 媒体属性

@media not|only mediatype and (expressions) {...}
@media not screen and(max-width:1024px){...}
或者
@media not(screen and (max-width:1024px)){..}

max-device-height：设备屏幕的最大高度
max-device-width： 设备屏幕的最大宽度
min-device-height：设备屏幕的最小高度
min-device-width： 设备屏幕的最小宽度
min-height： 最小高度
min-width：最小宽度
max-height： 最大高度
max-width：最大宽度

媒体查询加 flex 做相应式布局
rem

rem

假如我的设计稿是与iphone/6 为原型图， 则 width => 375
1rem = 375 / 25 = 15px

let font-size = document.documentElement.clientWidth  / 25 ;
document.documentElement.style.fontSize = font-size;

window.innerWidth
document.documentElement.clientWidth
window.devicePixelRatio 设备像素比 1.25

链接：
https://www.jianshu.com/p/561357d7cd7b
https://www.jianshu.com/p/656d812ab59b

来源：简书