CSS rem移动适配 与媒体查询详解

rem基本使用

• rem是一种相对单位
• rem单位是相对于HTML标签(根标签) 的字号计算出来的结果
• 1rem=1HTML字号的大小

 /* 1rem = 1html标签字号大小 必须设置html标签中的字号*/
        
        html {
            font-size: 20px;
        }

媒体查询

• 通过媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
• 当某个条件成立时,执行对应的css样式

  /* 写法 @media(媒体属性){
            选择器{
                css属性
            }
        }
  使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 */
        @media (width:375px) {
            html {
                font-size: 40px;
            }
        } 
        @media(width:320px) {
            html {
                font-size: 30px;
            }
        }

• 部分电脑可能不会在某分辨率下执行css样式,原因在于电脑屏幕分辨率缩放比不是100%
  

基本语法

• max-width 小于等于
• min-width大于等与

/* 视口宽度小于等于768px， 网页背景色是粉色 */
        
        @media (max-width:768px) {
            body {
                background-color: pink;
            }
        }
        /* 视口宽度大于等于1200px， 网页背景色是skyblue */
        
        @media(min-width:1200px) {
            body {
                background-color: skyblue;
            }
        }

书写顺序

• min-width 从小到大书写
• max-width 从大到小书写

 //css具有层叠性 后边的覆盖前边的样式
 @media(min-width:768px) {
            body {
                background-color: pink;
            }
        }
        
        @media(min-width:992px) {
            body {
                background-color: green;
            }
        }
        
        @media(min-width:1200px) {
            body {
                background-color: skyblue;
            }
        }

完整写法

• 关键词 and only not
• 媒体类型
  
• 媒体特征
  

link写法

• 外联式CSS引入

 	<!-- 视口宽度 >= 992px，网页背景色为粉色 -->
    <!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
    <!-- 加media(作为html属性,不加@符号,后边加() ) -->
    <link rel="stylesheet" media="(min-width:992px)" href="./one.css">
    <link rel="stylesheet" media="(min-width:1200px)" href="./two.css">

隐藏

  /* 如果监测到视口宽度小于768px 隐藏左侧区域 */
        @media(max-width:768px) {
            .left {
                display: none;
            }
        }

移动适配

解决写法

• rem移动适配布局中,一般将网页等分为10份,HTML标签的字号为视口宽度的1/10

  /* 步骤一 保证不同的视口,html标签字号不同
            字号是视口宽度的1/10
        */
        /* 视口宽度为320px 根字号为32px */
        @media(width:320px) {
            html {
                font-size: 32px;
            }
        }
        @media(width:375px) {
            html {
                font-size: 37.5px;
            }
        }
        @media(width:414px) {
            html {
                font-size: 41.4px;
            }
        }
        /* 2. 书写盒子尺寸, 单位rem */
        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }

布局流程

• 确定设计稿对应的设备的HTML标签字号
• 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
• N*37.5 = 68 → N = 68 / 37.5
• rem单位的尺寸 = px单位数值 / 基准根字号

flexible(适配移动端js框架)

• flexible.js是手淘开发出的一个用来适配移动端的js框架(开源)。
• 核心原理:根据不同的视口宽度给网页中的html根节点设置不用的font-size