1.png
rem的定义以及用法
rem（font size of the root element）rem是CSS3新增的一个相对单位，是指相对于根元素(html)的字体大小的单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
rem的优点就是可以通过修改html里面的字体大小，来改变页面元素的大小，可以适配不同机型，不同屏幕宽度。
2.png
3.png
4.png
媒体查询（Media Queries）的用法
Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果
语法规范
@media mediatype and|not|only (media feature){
css code ....
}
@meida screen and (min-width:320px){
html{
font-size:12px
}
}
参数说明
- 必须用 @media 开头
2.mediaType 媒体类型：all-用于所有设备，print-用于打印机和打印预览，screen-用于电脑屏幕，平板电脑，智能手机（常用）
3.and（且），not（非），only 关键字，将多个媒体类型或者媒体特性链接到一起作为媒体查询的条件
4.media feature 媒体特性，每种媒体类型都具有各自不同的特性，根据不同的媒体特性，设置不同的展示风格，一般常用max-width，min-width，width等
8.png
5.png
7.png
9.png
10.png
媒体查询案例，不同屏幕宽度，不同背景色
11.png
12.png
13.png
14.png
媒体查询+rem 实现不同屏幕宽度，UI适配效果（宽屏幕展示两行，窄屏幕展示一行）
html link 媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="./css/style320.css"
media="screen and (min-width:320px)"
/>
<link
rel="stylesheet"
href="./css/style640.css"
media="screen and (min-width:640px)"
/>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
</div>
</body>
</html>
------style640.css--------
div {
float : left;
width : 50%;
height: 100px;
}
div:nth-child(1) {
background-color: aquamarine;
}
div:nth-child(2) {
background-color: burlywood;
}
-------style320-------------
div {
width : 100%;
height: 100px;
}
div:nth-child(1) {
background-color: red;
}
div:nth-child(2) {
background-color: greenyellow;
}
15.png
16.png
17.png
18.png
Less基础
1.Less安装:
安装node.js->npm install -g less->node -v ,lessc -v
2.less编译:
less包含一套自定义的语法和一个解释器。用户根据这些语法定义自己的样式规则。这些规则最终会通过解释器，编译生成对应css文件，这样HTML页面才能使用。
vscode插件Ease Less ，可以把less文件（文件保存时）自动编译为css文件。
3.less变量:
变量是只没有固定的值，可以改变。一般对一些常用的颜色或者尺寸通过变量定义，后期修改方便
语法：@变量名：值；
变量名必须以@开头，不能包含特殊字符，不能以数字开头，大小写字母区分。
4.less嵌套:子类样式可以嵌套在父类样式中 .a{... .b{...}}
5.less运算:
任何数字，颜色，变量都可以参与运算，less提供了+，-，*，/ 算数运算
/(除法运算，必须包含在括号内使用，否则无效)
运算符左右要空格间隔
对于两个不同单位的值之间运算，运算结果的值取第一个值的单位 320px - 50rem ==>170px
如果两个运算数值只有一个数值有单位，则运算结果单位以这个数值单位为准 320 - 50rem ===>170rem
18-5.png
19.png
20.png
21.png
22.png
23.png
24.png
25.png
26.png
27.png
28.png
29.png
30.png
31.png
rem适配方案
32.png
33.png
34.png
35.png
方案1：rem+媒体查询+less
common.less 媒体查询
//设置常见的屏幕尺寸，修改里面的HTML文字大小
* {
margin: 0;
padding: 0;
}
a,
a:hover,
a:focus {
text-decoration: none;
color: black;
}
ul,
li {
list-style-type: none;
}
//假设设计图尺寸宽度为750px ,屏幕等份15份，所以1rem = 50px
html{
font-size: 50px;
}
/* 媒体查询，把屏幕等份15份 */
@no : 15;
@media screen and (min-width: 320px) {
html {
font-size: (320px / 15);
}
}
@media screen and (min-width: 360px) {
html {
font-size: (360px / @no);
}
}
@media screen and (min-width: 375px) {
html {
font-size: (375px / @no);
}
}
@media screen and (min-width: 384px) {
html {
font-size: (384px / @no);
}
}
@media screen and (min-width: 393px) {
html {
font-size: (393px / @no);
}
}
@media screen and (min-width: 400px) {
html {
font-size: (400px / @no);
}
}
@media screen and (min-width: 411px) {
html {
font-size: (411px / @no);
}
}
@media screen and (min-width: 414px) {
html {
font-size: (414px / @no);
}
}
@media screen and (min-width: 424px) {
html {
font-size: (424px / @no);
}
}
@media screen and (min-width: 480px) {
html {
font-size: (480px / @no);
}
}
@media screen and (min-width: 540px) {
html {
font-size: (540px / @no);
}
}
@media screen and (min-width: 600px) {
html {
font-size: (600px / @no);
}
}
@media screen and (min-width: 720px) {
html {
font-size: (720px / @no);
}
}
@media screen and (min-width: 750px) {
html {
font-size: (750px / @no);
}
}
@media screen and (min-width: 768px) {
html {
font-size: (768px / @no);
}
}
@media screen and (min-width: 1024px) {
html {
font-size: (1024px / @no);
}
}
@media screen and (min-width: 1280px) {
html {
font-size: (1280px / @no);
}
}
36.png
37.png
38.png
39.png
40.png
41.png
42.png
43.png
44.png
45.png
46.png
rem+媒体查询+less 实现苏宁易购首页适配布局
-------------html-------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"
/>
<title>Rem适配布局</title>
<link rel="stylesheet" href="./css/suning.css" />
</head>
<!-- 苏宁首页素材 -->
<!-- https://image1.suning.cn/uimg/cms/img/157199320847433454.png 左侧图标 -->
<!-- src="https://image1.suning.cn/uimg/cms/img/164013668424067776.gif" 圣诞图片 -->
<!-- src="https://image3.suning.cn/uimg/cms/img/157199321817918653.png" 登录图片 -->
<!-- https://oss.suning.com/adpp/creative_kit/material/picture/20200525-5d369c2ed4d14b8a81f785e84235c56143fb45029822488e.jpg?format=_is_1242w_610h banner圖片 -->
<!-- https://image3.suning.cn/uimg/cms/img/164006940623547477.gif" 广告图片 -->
<!-- https://image3.suning.cn/uimg/cms/img/161294178174781132.png?from=mobile 分类icon -->
<!-- 布局方案：Rem适配布局 (less+rem+媒体查询) -->
<body>
<div>
<div class="search-content">
<a href="#" class="classify"> </a>
<div class="search"></div>
<a href="#" class="login"> </a>
</div>
<div class="searchX">
<i class="search-icon"></i>
<form>
<input
type="text"
name=""
id=""
class="searchInput"
placeholder="hello shadow ,rem 适配"
/>
</form>
</div>
<div class="banner">
<img
src="https://oss.suning.com/adpp/creative_kit/material/picture/20200525-5d369c2ed4d14b8a81f785e84235c56143fb45029822488e.jpg?format=_is_1242w_610h"
alt=""
/>
</div>
<div class="ad">
<img
src="https://image3.suning.cn/uimg/cms/img/164006940623547477.gif"
alt=""
/>
</div>
<!-- nav 模块 -->
<nav>
<a href="#">
<img
src="https://image3.suning.cn/uimg/cms/img/161294178174781132.png?from=mobile"
alt=""
srcset=""
/>
<span>手机</span>
</a>
<a href="#">
<img
src="https://image3.suning.cn/uimg/cms/img/161294178174781132.png?from=mobile"
alt=""
srcset=""
/>
<span>手机</span>
</a>
<a href="#">
<img
src="https://image3.suning.cn/uimg/cms/img/161294178174781132.png?from=mobile"
alt=""
srcset=""
/>
<span>手机</span>
</a>
<a href="#">
<img
src="https://image3.suning.cn/uimg/cms/img/161294178174781132.png?from=mobile"
alt=""
srcset=""
/>
<span>手机</span>
</a>
<a href="#">
<img
src="https://image3.suning.cn/uimg/cms/img/161294178174781132.png?from=mobile"
alt=""
srcset=""
/>
<span>手机</span>
</a>
<a href="#">
<img
src="https://image3.suning.cn/uimg/cms/img/161294178174781132.png?from=mobile"
alt=""
srcset=""
/>
<span>手机</span>
</a>
<a href="#">
<img
src="https://image3.suning.cn/uimg/cms/img/161294178174781132.png?from=mobile"
alt=""
srcset=""
/>
<span>手机</span>
</a>
<a href="#">
<img
src="https://image3.suning.cn/uimg/cms/img/161294178174781132.png?from=mobile"
alt=""
srcset=""
/>
<span>手机</span>
</a>
<a href="#">
<img
src="https://image3.suning.cn/uimg/cms/img/161294178174781132.png?from=mobile"
alt=""
srcset=""
/>
<span>手机</span>
</a>
<a href="#">
<img
src="https://image3.suning.cn/uimg/cms/img/161294178174781132.png?from=mobile"
alt=""
srcset=""
/>
<span>手机</span>
</a>
</nav>
</div>
</body>
</html>
------------------suning.less-------------
//导入common样式表
@import url(common.less);
body {
min-width : 320px;
margin : 0 auto;
text-align : center;
width : 15rem;
line-height: 1.5;
background : #f2f2f2;
}
//页面元素rem计算公式 页面元素设计px / html字体大小,此设计 默认50，750px,划分15份，一份50px
@baseFont :50;
//header
.search-content {
width : 15rem;
height : (88rem / @baseFont);
line-height : (88rem / @baseFont);
background-color : #ffc001;
display : flex;
justify-content : space-between;
// position : fixed;
// top : 0;
// left : 50%;
// transform : translateX(-50%);
.classify {
width : (44rem / @baseFont);
height : (70rem / @baseFont);
background : url(https://image1.suning.cn/uimg/cms/img/157199320847433454.png);
//背景缩放
background-size: (44rem / @baseFont) (70rem / @baseFont);
margin : (11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont);
}
.login {
width : (44rem / @baseFont);
height: (70rem / @baseFont);
background : url(https://image3.suning.cn/uimg/cms/img/157199321817918653.png);
background-size: (44rem / @baseFont) (70rem / @baseFont);
margin : (11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont);
}
.search {
width : (390rem / @baseFont);
height : (76rem / @baseFont);
background : url(https://image1.suning.cn/uimg/cms/img/164013668424067776.gif);
background-size: (390rem / @baseFont) (76rem / @baseFont);
}
}
//搜索框
.searchX {
display : block;
position : absolute;
height : 1.76rem;
text-align: center;
width : 15rem;
z-index : 10;
.search-icon {
position : absolute;
width : 0.72rem;
height : 0.72rem;
top : 0.56rem;
left : 0.4rem;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAABGtJREFUWAntl8tr1EkQxzMT4qhBo/FBFLMylyWQwJIHiqCnqAdFXfci6klZkFW8uUpUPKjgHyAiomgCHnYRMRg8uHtSlyWuk5dBJ3pJloCPKIkoiUJmJn5q7PrRv4e/yTxO4g96qrq6Ht/uru6uKSv7/oWvQCR8OHx0dHR03sTExIpUKrWgoqLiVUNDw5tIJJIJtwofzQvQ0NDQgsnJyS24/HlmZmYjdKnHfYp+ElC3aZ1NTU0Jz3jO7qwADQ8Pzx0fHz+MtzaALM7p1SgA6gHs0ebm5u5Z2+RS7O/vX8OW3EDvhwDdj8heEvgDQGugy6BRrx7ya9XV1Qfj8fgn75i3H7pCPT09ewlwBaO5luEz+A6CdDLzpCUvk5waGxtrRfYLbQ+2MWv8IfzOlpaWl5bMx34VkAFz3bJ4C4jj5MVVaNqSB7K9vb2rM5nMOQZ3WwrPy8vL1zY2Nr6zZC42EJDZpntoZlcGAI9p2wHzv8t6Fh0mdoCVOo9qhVH/i5Xd8rVJ+fZbEtjkjAOmsrJyfSFgBADBLxF8F23GANrc19d3xPA+4gNkTpMmsGzT9rq6ug8+yzwEgLqFn1Nqwla2JZPJJdq3qQuQ3DMMtqkCTiRn8t4mtbcpeSP59MTIqqampo7Z48q7AKG0lf3We+aZJLAqFkuZXJrmTBZ/coJ9OewChMIOK3CHOLH6RbNM8A5OXosjYq3k8LR4nXoByXOQ/QDTqXypKD4z+OpSf+TSJuWVOoDkUkOob9NH76WnBsXSaDTaoz5YpVrllTqA5NVWITT0NrX0CmFfqBErtlJ5pQ4gKSFUiGJRx1z9BFF8v1c5K7RQeaUOIKlnVIhijfKlpuRNtfoE3LjySh1AUlwhlHqmDMVlJqdUr2SUyf5oOfOlhgMIEHICsq83RlHzalu2JWM3qCdi/qe8UgeQCFC4rQNQKSFK+g0MDCzHoXPUiXffG8ALyL579kgJ4TUopp9Opw9hn331AfOA52TE688FiJs0IYqixLbFTD3jtSmoPzg4WIu/39WYOBeVt6kLkBk4ainslnrG6hfMTk9P/4axXL6SGo9YnT+CnPkAcUN3Y9CuyqzUeUDt1H6hFD9b1Rb+JDG0PlJxlvoAiZSCXGbzMKvxZc9vkk8ncRSob/RCCbZzVIEydkx5Lw0MYP4dyKo8FwOcRdj/M6zUY9q2XMA4TXH0ziYSiX9EX3ywIt1C5cPXafH5pef+DRSqCqXmIk7Gn/Q3q8zQ19Au81DK2zRFgFpanMDr6LdaAd/zT6MKcGsZ+xd5dhHgr3KIfoW6ti4UkATHQbnUwMxKiqsqkeXzEbCdvNwnNrJq+Duh9kGgcgJSY6mBTdkplZ7vlVY9Q1ME66Jd5jTdhcorkN16cvEK9vst/Yus4EHtzxqQGuAsIpUeK7YJvpZgAm4+bZT+CNs4HIvF/q6vr3cea7UVKvY2KAGLbJX+gcwbkO28UF5AsX0XACP/2Z6ypT/pKhbqsyR2JPoKAAWe9JIE+CadfAZDI9Qzc39rMQAAAABJRU5ErkJggg==);
background-size : 0.72rem 0.72rem;
}
.searchInput {
border : 0;
-webkit-border-radius: 0.6rem;
padding : 0.06rem 0.4rem 0 1.3rem;
width : 13rem;
height : 1.28rem;
line-height : 1.28rem;
background : #Fff2cc;
font-size : .56rem;
border-radius : 0.6rem;
color : #999999;
-webkit-appearance : none;
}
}
//轮播图
.banner {
width : 15rem;
height: (368rem / @baseFont);
img {
width : 100%;
height: 100%;
}
}
//广告图
.ad {
width : 15rem;
height: (178rem / @baseFont);
img {
width : 100%;
height: 100%;
}
}
//分类导航
nav {
width: 15rem;
a {
float : left;
width : (150rem / @baseFont);
height : (140rem / @baseFont);
margin-top : (5rem / @baseFont);
display : flex;
flex-direction : column;
justify-content: center;
align-items: center;
img {
display: block;
width : (82rem / @baseFont);
height : (82rem / @baseFont);
margin : (10rem / @baseFont) 0 auto;
}
span {
font-size: (25rem / @baseFont);
color : #333;
}
}
}
图片.png
方案2 rem+flexible
47.png
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 引入flexible -->
<script src="./js/index.min.js"></script>
</head>
<style>
body {
min-width: 320px;
max-width: 750px;
margin: 0 auto;
padding: 0;
text-align: center;
width: 10rem;
line-height: 1.5;
background: #f2f2f2;
}
/* 如果我们的屏幕超过了750px，那么就按照750的设计稿走，保证不会让我们的页面超过750px，低于750px的屏幕，就自适应展示 */
@media screen and (min-width: 750px) {
html {
font-size: 75px !important;
}
}
</style>
<body>
<!-- 因为flexible 把屏幕划分10等份，假如设计稿宽度是750，那么1rem = 75px -->
<!-- 想让图片宽度和高度铺满全屏 -->
<img
style="width: 10rem; display: block; height: 100vh"
src="https://image.wmlz.net/images/61c18bd7d59f5.jpg"
alt=""
/>
</body>
</html>
cssRem 插件，可以根据配置，帮助把px转换为对应的rem单位。
48.png
注意：cssRem插件需要配置当前设备的HTML文字大小。比如如果设计稿是750px，那么默认的html文字大小就是75px
图片.png
图片.png
vscode px2vwvh 插件，根据配置设计稿宽高，把px转换为vw和vh
图片.png
点击设置图标，选择扩展设置，配置设计稿宽高
图片.png
