（精中求精） rem适配布局

1.适配导读：

什么是适配布局？与flex或者流式布局又有什么区别？

所谓的适配布局，是让页面盒子的高度，宽度，内外边距，边框大小，文字的大小，定位的元素位置等能够根据屏幕宽度自动改变大小和位置，从而达到对不同的屏幕都能够做到最完美的展示，这就是rem适配布局的优秀地方。

flex和流式布局，主要针对盒子的宽度，仅能够做到宽度自适应屏幕，但是存在高度无法改变的缺陷，rem正好补全这一点。

以后的布局，不会是只用flex或者只用流式布局、rem布局，而是混合布局，flex布局做排版，rem做自适应屏幕。

最后的最后我会放上苏宁的案例，供大家理解flex+less+rem布局的完美

2.适配布局的方法：

1.rem + less +媒体查询

2.flexible.js + less +rem

本次重点在第一种方法

3.适配布局基础知识导读

1.初识rem em

1.rem 与 em ？

为什么放一块讲？ rem 和 em都是相对单位，不同的地方在于 rem相对html的字体大小来确定 1rem = html的font-size em根据自身，如果自身没有设置字体大小，那么就会寻找最近具有字体大小的父盒子

2.为什么用rem

正是因为rem只根据html的字体大小有关，所以只要在不同的屏幕下，只要更改html的字体大小，就可以控制1rem = 多少，将盒子的高宽等用px的地方都改为rem，达到改变html字体大小从而改变整个页面的大小，达到适配效果。

2.html的字体大小的确定

rem的难点在于如何确定不同屏幕宽度下的html的字体大小问题？

先讲思路：

1.根据设计稿，将屏幕划分成10 / 15 /20 / 30 / 40份，选一个自己喜欢的，或者领导要求的份数

2.假设此时设计稿是750px 我们将设计稿分为15份那么每一份的大小为 50px

3.所以此时我们只需要设置在750屏幕及以上，字体大小为50px

4.确定好份数后， 750px下，html字体大小为 50 450px下呢？

5.450px下 html字体大小 450 /15 = 30px

6.540px ？ 540 / 15 = 36px

7.总结，html字体大小 = 屏幕宽度 / 确定划分的份数

下面列出几个问题？

为什么html字体大小 = 屏幕宽度 / 确定划分的份数？

因为我们要实现等比例的缩放所谓的等比例，是屏幕宽度与 html字体大小的比例永远是份数： 1 这样才能够实现等比缩放。

如果750px下字体大小为 50px 500px 屏幕下字体大小为 20px 合适吗？缩放也不会同步吧！

3.媒体查询

1.语句规范

1.如果界面的盒子摆放位置不变，那么媒体查询写在css中，如果是内嵌式，需要写在style内部如果是外链式，需要写在css文件里

规范：

@media screen（手机，平板，pc端）/all （全部）/print（打印机） and （条件语句）

内容虽多，但是需要我们记住的就是下面这种类型！

@media screen and (max-width:540px)

2.如果界面的盒子位置需要改变，那么就需要写不同的css样式，媒体查询此时作用就是通过查询屏幕宽度，选择不同的样式此时的书写方式

<link rel="stylesheet" href="./style780.css" media=" screen and (min-width:780px)">

2.媒体查询通用代码：

主要适配的屏幕宽度有：320px 360px 375px 384px 400px 414px 424px 480px 540px 720px 750px

@media screen and (min-width: 320px) {html {font-size: 21.33333333px;}
}
@media screen and (min-width: 360px) {html {font-size: 24px;}
}
@media screen and (min-width: 375px) {html {font-size: 25px;}
}
@media screen and (min-width: 384px) {html {font-size: 25.6px;}
}
@media screen and (min-width: 400px) {html {font-size: 26.66666667px;}
}
@media screen and (min-width: 414px) {html {font-size: 27.6px;}
}
@media screen and (min-width: 424px) {html {font-size: 28.26666667px;}
}
@media screen and (min-width: 480px) {html {font-size: 32px;}
}
@media screen and (min-width: 540px) {html {font-size: 36px;}
}
@media screen and (min-width: 720px) {html {font-size: 48px;}
}
@media screen and (min-width: 750px) {html {font-size: 50px;}

4.less使用

1.less介绍

less是帮助我们书写css的工具帮助我们简化书写css样式的复杂性，最直接的就是不用再书写很长的父级变量名而且less中可以定义变量，后期更易于维护代码。如若将颜色字体大小份数定义为变量，那么我们只需要改变变量的值就可以实现全局的更改。

2.less的使用

后缀 .less

在less中写代码，后代写在父亲的大括号内如果想要用结构伪类伪元素，需要在前面加&

使用如图：

要求：第一个p 颜色是红色第二个p里面的a鼠标经过变成红色 box里面的文字是绿色

html结构：
<body><div class="box"><p>我是第一个p标签;</p><p><a href="#">我是第二个p标签</a></p><div class="box2">hello</div></div>
</body>

less语句：
.box {p {&:first-child {color: red;}&:nth-child(2) {a {color: blue;&:hover {color: red;}}}}.box2 {color: green;}
}

以上就是rem适配布局的全部基础内容

4.苏宁移动端布局

1.搭建文件夹结构

2.index.html中引入normalize.css基础样式，设置视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="./css/normalize.css">

3.less中书写媒体查询

通常我们把媒体查询写在common.less中

// 设置常见的屏幕尺寸 修改里面的html文字大小
a {text-decoration: none;color: #333;
}// 我们此次定义的划分的份数 为 15
@no: 15;// 320
@media screen and (min-width: 320px) {html {font-size: (320px / @no);}
}// 360
@media screen and (min-width: 360px) {html {font-size: (360px / @no);}
}// 375 iphone 678
@media screen and (min-width: 375px) {html {font-size: (375px / @no);}
}// 384
@media screen and (min-width: 384px) {html {font-size: (384px / @no);}
}// 400
@media screen and (min-width: 400px) {html {font-size: (400px / @no);}
}// 414
@media screen and (min-width: 414px) {html {font-size: (414px / @no);}
}// 424
@media screen and (min-width: 424px) {html {font-size: (424px / @no);}
}// 480
@media screen and (min-width: 480px) {html {font-size: (480px / @no);}
}// 540
@media screen and (min-width: 540px) {html {font-size: (540px / @no);}
}// 720
@media screen and (min-width: 720px) {html {font-size: (720px / @no);}
}// 750
@media screen and (min-width: 750px) {html {font-size: (750px / @no);}
}

4.index.less中设置body基础

body {*width*: 15rem;*min-width*: 320px;*font-family*: Arial, Helvetica;*margin*: 0 auto;}

5.代码结构模块划分

6.代码书写

index.less代码：

body {width: 15rem;min-width: 320px;font-family: Arial, Helvetica;margin: 0 auto;
}@basefont : 50px;// 顶部搜索模块
.search-content {display: flex;position: fixed;top: 0;left: 50%;-webkit-transform: translate(-50%);transform: translate(-50%);height: (88rem / @basefont);width: 15rem;background-color: #FFC001;.classify {width: (44rem / @basefont);height: (70rem / @basefont);background: url(../images/classify.png) no-repeat;background-size: (44rem / @basefont) auto;margin: (11rem / @basefont) (25rem / @basefont) (7rem / @basefont) (24rem / @basefont);}.search {flex: 1;input {height: (66rem / @basefont);width: 100%;border: 0;outline: 0;border-radius: (33rem / @basefont);margin-top: (12rem / @basefont);background-color: #FFF2CC;font-size: (25rem / @basefont);padding-left: (55rem / @basefont);color: #757575;}}.login {width: (75rem / @basefont);height: (70rem / @basefont);background-color: blue;font-size: (25rem / @basefont);color: #fff;text-align: center;line-height: (70rem / @basefont);margin: (10rem / @basefont);}
}// banner模块
.banner {img {width: 100%;}
}//ad模块
.ad {display: flex;a {flex: 1;img {width: 100%;}}
}//nav模块
.nav {display: flex;flex-wrap: wrap;a {flex: 20%;display: flex;flex-direction: column;align-items: center;font-size: (25rem / @basefont);span {margin: (10rem / @basefont) 0 (20rem / @basefont);}img {width: (82rem / @basefont);}}
}

index.html结构

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="./css/normalize.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/index.css"><title>suning </title>
</head><body><!-- 顶部搜索模块 --><div class="search-content"><a href="#" class="classify"></a><div class="search"><!-- action 必需的 action 属性规定当提交表单时，向何处发送表单数据。 --><form action="#"><input type="search" value="厨卫保暖季 哒哒哒"></form></div><a href="#" class="login">登录</a></div><!-- banner模块 --><div class="banner"><a href="#"><img src="./uploads/banner.gif" alt=""></a></div><!-- 广告部分 --><div class="ad"><a href="#"><img src="./uploads/ad1.gif" alt=""></a><a href="#"><img src="./uploads/ad2.gif" alt=""></a><a href="#"><img src="./uploads/ad3.gif" alt=""></a></div><!-- nav模块 --><div class="nav"><a href="#"><span><img src="./uploads/nav1.png" alt=""></span>爆款手机</a><a href="#"><span><img src="./uploads/nav1.png" alt=""></span>爆款手机</a><a href="#"><span><img src="./uploads/nav1.png" alt=""></span>爆款手机</a><a href="#"><span><img src="./uploads/nav1.png" alt=""></span>爆款手机</a><a href="#"><span><img src="./uploads/nav1.png" alt=""></span>爆款手机</a><a href="#"><span><img src="./uploads/nav1.png" alt=""></span>爆款手机</a><a href="#"><span><img src="./uploads/nav1.png" alt=""></span>爆款手机</a><a href="#"><span><img src="./uploads/nav1.png" alt=""></span>爆款手机</a><a href="#"><span><img src="./uploads/nav1.png" alt=""></span>爆款手机</a><a href="#"><span><img src="./uploads/nav1.png" alt=""></span>爆款手机</a></div>
</body></html>