如何实现移动端适配

0.meta:vp

做移动端页面时，二话不说先加一句

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

别问，问就是防止浏览器自动缩放

1.响应式布局（responsive）

响应式布局可使网站在不同的设备上浏览时对应不同分辨率皆有适合的呈现
其布局通过媒体查询@media实现，详见：https://www.jianshu.com/p/c6d82db7ad62
新闻及门户网站可以用响应式布局，但大型网站媒体查询有其局限性
因此实际工作中不常见，但面试会考

实际上除了响应式，网站通常会采用：1.提供两套html由后端根据用户设备来切换 2.提供两个完全不同的url由后端根据用户设备来跳转

2.通过动态rem实现

什么是rem

css常见的单位有： px，em，rem ，vh ，vw

• rem：root em 即根元素的字体大小
• em：一个字的宽度（一般指字母m），它的大小与其font-size一样
• vh： 100vh === 视口高度
• vw： 100vw === 适口宽度

需要注意：

• 网页字体默认大小16px，em、rem默认情况下都是16px
• chrome可以在浏览器设置中自行设置最小字号，无论控制样式多小都不会小于这个值，这个值默认12px

为什么动态rem可以实现移动端适配

动态rem可以做到度量单位与页面宽度相联系，我们知道设计页面时单位以宽度为标准方能保证完美还原设计稿。
这也是不采用百分比布局的原因：百分比布局的宽与高之间没办法有联系（而不用vw是因为兼容性太差）
正是因为它是动态变化的，所以可以用一套移动端css样式来适配不同分辨率的移动端页面

如何实现

<script>
document.write(` <style>{html{font-size:${window.innerWidth}px}}</style>`)
</script>

通过上述代码就可以实现1rem === 页面宽度
在实际操作中遇到较小的，固定不动的样式可以与px等其他单位混用，像字体大小固定16px并不影响美观

3.实现px2rem

通过sass来实现px与rem的自动转换

1. 创建一个文件，并在里面安装sass
   npm i node-sass
   2.在该文件中再创建两个文件，一个sass文件，一个css文件
   3.在sass文件中创建一个.scss为后缀的样式文件
   4.用node-sass对该文件进行监听并将scss文件转换成.css样式文件输出到css文件夹
   node-sass -wr scss -o css
   通过以上命令就可以实时得到css文件了
   5.对.scss文件进行编辑

@function px( $px ){
    @return $px/$designWidth + rem;
  }
 $designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。如果设计师的设计稿宽度不统一，就杀死设计师，换个新的。

并在html文件中添加以下代码，并引入.css文件

<script>
document.write(` <style>{html{font-size:${window.innerWidth}px}}</style>`)
</script>

这样1rem === 640px， 1rem代表着整个页面的宽度
我们在.scss文件中对元素添加样式width:px(320)就可以规定元素宽度为页面的一半