rem布局

rem布局

一、rem基础

1.em是相对于父元素的字体大小
2.rem是相对于html元素的字体大小

rem的优点：可以通过修改html里面的文字大小来整体控制页面元素的大小

二、媒体查询

mediatype：all（所有设备）、print（打印机和打印预览）、screen（电脑屏幕，平板，手机）
关键字：and（且）、not（非）、only（指定某个类型的媒体类型，可以省略）
媒体特性：width、min-width、max-width

        /* 在屏幕上 并且 最大的宽度是300像素 设置想要的样式 */
        /* 从小到大的写法 */
        @media screen and (max-width: 300px) {
			
        }
        @media screen and (min-width: 301px) {
        
        }
        @media screen and (min-width: 501px) {
			
		}

媒体查询可以按照从小到大或者从大到小的写法，但是使用从小到大会更加简洁（css层叠性）

三、Less基础

（1）less变量

@color: pink;
body {
    background-color: @color;
}

（2）less编译

（3）less嵌套

.nav {
    width: 200px;
    height: 200px;
    background-color: pink;
    // 后代选择器
    .logo {
        color: red;
    }
    a {
        // 伪类选择器
        &:hover {
            color: blue;
        }
        // 伪元素选择器
        &::before {
            content: "";
        }
    }
}

&：伪类、伪元素、交集选择器

（4）less运算
less提供了加（+）减（-）乘（*）除（/）的运算
运算符左右两侧必须有空格
两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
两个数都有单位，且两个单位不一样，以第一个单位为准

@border: 5px + 5;
div {
    width: 200px - 50;
    height: 200px * 2;
    border: @border solid red;
}
img {
    width: 82 / 50rem;
    height: 82 / 50rem;
}

四、rem适配方案

方法：使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化时，元素尺寸也会发生变化，从而达到等比缩放的适配。


技术方案一：less + 媒体查询 + rem



例子：苏宁首页制作
静态网站：苏宁移动端首页1

技术方案二：flexible.js + rem

注意是划分成10等份