移动端

移动端、pc端布局差异

1. 没有hover
2. 没有resize事件
3. 没有滚动条
4. 有touch事件

移动端

//淘宝的meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

媒体查询

@media (min-width:1024px){

}
@media (max-width:768px){
    //最大宽度
}
@media (min-width:768px) and (max-width:1024px){
    //介于两者之间
}

在引入文件的时候设置最大宽度768px的时候设置加载的样式

<link rel="stylesheet" href="./index.css" media="(max-width:768px)">

移动端布局

rem：根元素html的font-size

em:自身font-size的大小

vw 100vw = 1 viewport

vh 100vh = 1 viewport

动态计算rem 的值

<script type="text/javascript">
      function init() {
        let width = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = width / 10 + "px";
        //1rem相当于屏幕的1/10
      }
      init();
      //添加监听，窗口发生变化时计算
      window.addEventListener("resize", init);
      window.addEventListener("orientationchange", init);
 </script>

使用vscode插件将px转化成rem

在setting.json中设置如下：

"cssrem.rootFontSize": 设计稿宽度/10,