1 rem基础

rem单位

rem(root em)是一个相对单位,类似于em,em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如,根元素(html)设置font-size= 12px;非根元素设置width:2rem;则换成px表示就是24px。

<!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><style>html {font-size: 14px;}div {font-size: 12px;width: 15rem;height: 15rem;background-color: purple;}p {/* 1. em相对于父元素的字体来说的 *//* width: 10em;height: 10em; *//* rem 相对于html元素字体大小来说的 */width: 10rem;height: 10rem;background-color: pink;/* 3. rem的优势就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */}</style>
</head>
<body><div><p></p></div>
</body>
</html>

2 媒体查询

2.1 什么是媒体查询

媒体查询(Media Query)是CSS3新语法。

使用@media查询,可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询

2.2 语法规范

@media mediatype and|not|only (median feature) {CSS-Code;
}

用@media开头注意@符号
mediatype 媒体类型
关键字andy not only
media feature媒体特性必须有小括号包含

mediatype查询类型
将不同的终端划分为不同的类型，称为媒体类型
在这里插入图片描述
关键字
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件。

and :可以将多个媒体特性连接到一起，相当于“且”的意思。
not :排除某个媒体类型,相当于“非”的意思,可以省略。
only :指定某个特定的媒体类型,可以省略。

媒体特性
每种媒体类型都具有格子不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。暂时了解一下三个，注意他们要加小括号

<!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><style>/* 这句话的意思是：在我们屏幕上 并且 最大的宽度是800像素 设置我们想要的样式 *//* max-width 小于等于800 *//* 媒体查询可以根据不同的屏幕尺寸改变不同的样式 */@media screen and (max-width: 800px) {body {background-color: pink;}}@media screen and (max-width: 500px) {body {background-color: purple;}}</style>
</head>
<body></body>
</html>

案例：根据页面宽度改变背景颜色

按照从大到小的或者从小到大的思路
注意我们有最大值max-width和最小值min-width都是包含等于的
当屏幕小于540像素，背景颜色变为蓝色(x<=539)
当屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色(540<=x<=969)
当屏幕大于等于970像素的时候,背景颜色为红色(x>=970)

eg:

<!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><style>/* 媒体查询一般按照从大到小的或者从小到大的顺序来 */@media screen and (max-width: 539px) {body {background-color: blue;}}/* @media screen and (min-width: 540px) and (max-width: 969px) {body {background-color: green;}} */@media screen and (min-width: 540px) {body {background-color: green;}}@media screen and (min-width: 970px) {body {background-color: red;}}/* screen还有and必须带上 不能省略  单位px不能省略 */</style>
</head>
<body></body>
</html>

2.3 媒体查询+rem实现元素动态大小变化

rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸

媒体查询可以根据不同设备度来修改样式

媒体查询+rem 就可以实现不同设备宽度,实现页面元素大小的动态变化

案例：媒体查询+rem实现元素变化

<!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><style>* {margin: 0;padding: 0;}/* html {font-size: 100px;} */@media screen and (min-width: 320px) {html {font-size: 50px;}}@media screen and (min-width: 640px) {html {font-size: 100px;}}.top {height: 1rem;font-size: .5rem;background-color: green;color: #fff;text-align: center;line-height: 1rem;}</style>
</head>
<body><div class="top">购物车</div>
</body>
</html>

2.4 引入资源

当样式比较繁多的时候,我们可以针对不同的媒体使用不同stylesheets(样式表)。

原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件。

index.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"><title>Document</title><style>/* 当屏幕大于等于640px以上的，让div一行显示2个 *//* 当屏幕小于640 让div一行显示一个 *//* 建议：媒体查询最好的方法是从小到大 *//* 引入资源就是针对于不同的屏幕尺寸 调用不同的css文件 */</style><link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)"><link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
</head>
<body><div>1</div><div>2</div>
</body>
</html>

style640.css

div {float: left;width: 50%;height: 100px;
}div:nth-child(1) {background-color: pink;
}div:nth-child(2) {background-color: purple;
}

style320.css

div {width: 100%;height: 100px;
}div:nth-child(1) {background-color: pink;
}div:nth-child(2) {background-color: purple;
}

3 Less基础

3.1 维护Css的弊端

CSS是一门非程序式语言,没有变量、函数、SCOPE (作用域)等概念。

CSS需要书写大量看似没有逻辑的代码,CSS冗余度是比较高的。
不方便维护及扩展,不利于复用。
CSS没有很好的计算能力
非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。

3.2 Less介绍

Less(Leaner Style Sheets的缩写)是一门CSS扩展语言,也成为CSS预处理器。

做为CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性。

它在CSS的语法基础之上,引入了变量, Mixin(混入),运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情。

Less中文网址: http://lesscss.cn/

常见的CSS预处理器: Sass、Less、 Stylus

Less是一门CSS预处理语言，它扩展了CSS的动态特性

Less使用

首先建立一个后缀名为less的文件，在这个less文件里面书写css语句

Less变量
Less编译
Less嵌套
Less运算

3.3 Less变量

变量是指没有固定的值,可以改变的。因为CSS中的一些颜色和数值等经常使用。

@变量名:值;

变量命名规范

必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

3.4 Less编译

vscode Less插件

Easy LESS插件用来把less文件编译为
css文件

安装完毕插件,重新加载下vscode.
只要保存一下Less文件,会自动生成CSS文件。

3.5 Less嵌套

平时写选择器的嵌套：

#header .logo {width: 300px;
}

Less嵌套写法

#header {.logo {width: 300px;}
}

如果遇见(交集|伪类伪元素选择器)

内层选择器的前面没有&符号,则它被解析为父选择器的后代;
如果有&符号,它就被解析为元素自身或父元素的伪类。
index.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"><title>Document</title><style></style><link rel="stylesheet" href="nest.css">
</head>
<body><div class="header"><a href="#">文字</a></div><div class="nav"><div class="logo">yayaya</div></div>
</body>
</html>

nest.less

.header {width: 200px;height: 200px;background-color: pink;// 1. less嵌套 子元素的样式直接写到父元素里面a {color: red;// 2. 如果有伪类、交集选择器、伪元素选择器 内层选择器的前面需要加&&:hover {color: blue;}}
}
.nav {.logo {color: green;}&::before {content: "";}
}

生成的ness.css

.header {width: 200px;height: 200px;background-color: pink;
}
.header a {color: red;
}
.header a:hover {color: blue;
}
.nav .logo {color: green;
}
.nav::before {content: "";
}

3.6 Less运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。

@border: 5px + 5;
div {border: @border solid red;
}
// 生成的css
div {border: 10px solid red;
}
// 还可以这样写
width: (@width + 5) * 2;
img {width: (82 / 50)rem;height: (82 / 50)rem;
}

注意:

乘号(*)和除号(/)的写法
运算符中间左右有个空格隔开 1px + 5
对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位,则运算结果就取该单位

4 rem适配方案

让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。
使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配。

4.1 rem实际开发适配方案

按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小; (媒体查询)
CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值;

4.2 rem适配方案技术使用（市场主流）

技术方案1：

less
媒体查询
rem

技术方案2：

flexible.js
rem

方案2更简单

4.3 rem实际开发适配方案1

rem + 媒体查询 + less技术

设计稿常见尺寸宽度

一般情况下,我们以一套或两套效果图适应大部分的屏幕,放弃极端屏或对其优雅降级,牺牲一些效果 现在基本以750为准。

动态设置html标签font-size大小

假设设计稿是750px
假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)
每一份作为html字体大小,这里就是50px
那么在320px设备的时候,字体大小为320/15就是21.33px
用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
比如我们以750为标准设计稿
一个100 * 100像素的页面元素在750屏幕下，就是100 / 50转换为rem是2rem * 2 rem比例是1比1
320屏幕下，html字体大小为21.33则2rem = 42.66px 此时宽和高都是42.66 但是宽和高的比例还是1比1
但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

元素大小取值方法

最后的公式:页面元素的rem值=页面元素值(px) / (屏幕宽度/划分的份数)
屏幕宽度/划分的份数就是html font-size的大小
或者:页面元索的rem值=页面元素值( px) / html font-size 字体大小

<!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><style>@media screen and (min-width: 320px) {html {font-size: 21.33px;}}@media screen and (min-width: 750px) {html {font-size: 50px;}}div {width: 2rem;height: 2rem;background-color: pink;}/* 1. 首先选一套标准尺寸 750为准 *//* 2. 用屏幕尺寸除以划分的份数 得到了html里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 *//* 3. 页面元素的rem值 = 页面元素在750像素下的px值 / html里面的文字大小 */</style>
</head>
<body><div></div>
</body>
</html>

5 苏宁易购首页案例制作

案例：苏宁网移动端首页

访问地址：m.suning.com

技术选型
方案:采取单独制作移动页面方案

技术:布局采取rem适配布局(less + rem + 媒体查询)

设计图:本设计图采用750px设计尺寸

搭建相关文件夹结构
设置视口标签一引入初始化样式

<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">

设置公共common.less文件

新建common.less 设置好最常见的屏幕尺寸,利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
我们关心的尺有320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
划分的份数我们定为15等份
因为我们pc端也可以打开我们苏宁移动端首页,我们默认html字体大小为50px,注意这句话写到最上面

新建index.less文件

新建index.less 这里面写首页的样式
将刚才设置好的common.less引入到index.less里面语法如下:

// 在index.less中导入common.less文件
@import "common"

生成index.css 引入到index.html里面

body样式

body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background: #F2F2F2;
}

6 rem适配方案2

6.1 简洁高效的rem适配方案flexible.js

它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。

我们要做的,就是确定好我们当前设备的html文字大小就可以

比如当前设计稿是750px,那么我们只需要把html文字大小设置为75px(750px / 10)就可以

里面页面元素rem值:页面元素的px值/ 75

剩余的,让flexible.js来去算

github地址:https://github.com/amfe/lib-flexible

6.2 使用适配方案2制作苏宁移动端首页

技术选型
方案:我们采取单独制作移动页面方案
技术:布局采取rem适配布局2 (flexible.js + rem)
设计图:本设计图采用750px设计尺寸
搭建相关文件夹结构
设置视口标签以及引入初始化样式还有js文件

<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/index.css">

引入js文件

<!-- 在index.html中引入flexible.js这个文件 -->
<script src="js/flexible.js"></script>

body样式

body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background: #F2F2F2;
}

6.3 VSCode px转换rem插件`cssrem`

这是一个神奇的插件

设置html字体大小基准值

打开设置快捷键是ctrl + 逗号
搜索cssrem.root调整大小

最后效果

459~486（rem+媒体查询+Less+苏宁易购移动端首页）相关推荐

9月1日-9月3日（移动web开发——rem适配布局、苏宁易购移动端首页制作）
目录一. rem单位二.媒体查询 2.1 价值 2.2 语法规范
使用两种rem布局方案-实现静态苏宁易购移动端首页
使用两种rem布局方案-实现静态苏宁易购移动端首页方案1:rem+less+媒体查询 html common.less index.less 方案2:flexible.js+rem 小插件小问题 ...
苏宁易购移动端首页_rem适配+less
效果图 index.html <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
苏宁易购移动端页面（附源码）
苏宁易购移动端简写首页(附源码) 源码链接:https://pan.baidu.com/s/1CXdE4t30e31Q3eJIGWlbRg 提取码:nbnb 其中有一些属性计算教冗余,建议大家使用vs ...
破解智慧零售密码苏宁易购818引爆全民消费狂欢
对于零售行业来说,2019年上半年的种种迹象都显示,整体市场环境并不让人乐观. 根据国家统计局数据,2019年1-6月,全国实现社会消费品零售总额19.5万亿元,同比增长8.4%,增速同比回落1个百分 ...
苏宁易购2019上半年业绩大增背后：已完成全场景零售布局，家电领跑全渠道
7月30日,国内智慧零售龙头企业苏宁易购(002024.SZ)公布了2019年上半年的业绩快报.数据显示,苏宁上半年营收.利润双双录得大幅增长. 2019上半年:苏宁易购逆势上扬,家电领跑全渠道据国 ...
止血、回血苏宁易购正在复苏路上
扛住二三季度的至暗时刻,苏宁易购正在稳住其基本盘面. 在10月29日苏宁易购披露的2021年前三季度业绩报告中,公司前三季度营收达到1155.74亿元.虽然财务数据上公司仍处于"三十年发展历 ...
3年100亿！苏宁易购与倍科达成重磅战略合作
紧抓消费复苏机遇,家电行业迎来重磅合作.4月20日,苏宁易购与国际知名家电品牌倍科在南京召开战略合作发布会,共同宣布升级战略合作伙伴关系.双方将围绕3年100亿战略合作目标开展独家品牌授权.发起&qu ...
“拿下”家乐福中国，苏宁易购全场景零售进入新阶段
9月27日,苏宁易购发布公告称,正式完成与家乐福中国80%股份的交割手续,家乐福中国正式进入苏宁时刻. "拿下"家乐福中国,苏宁大快消实现"跨越"式进阶. 随着 ...

459~486（rem+媒体查询+Less+苏宁易购移动端首页）

1 rem基础

rem单位

2 媒体查询

2.1 什么是媒体查询

2.2 语法规范

案例：根据页面宽度改变背景颜色

2.3 媒体查询+rem实现元素动态大小变化

案例：媒体查询+rem实现元素变化

2.4 引入资源

3 Less基础

3.1 维护Css的弊端

3.2 Less介绍

Less使用

3.3 Less变量

3.4 Less编译

3.5 Less嵌套

3.6 Less运算

4 rem适配方案

4.1 rem实际开发适配方案

4.2 rem适配方案技术使用（市场主流）

4.3 rem实际开发适配方案1

5 苏宁易购首页案例制作

案例：苏宁网移动端首页

6 rem适配方案2

6.1 简洁高效的rem适配方案flexible.js

6.2 使用适配方案2制作苏宁移动端首页

6.3 VSCode px转换rem插件`cssrem`

459~486（rem+媒体查询+Less+苏宁易购移动端首页）相关推荐

最新文章

热门文章

459~486（rem+媒体查询+Less+苏宁易购移动端首页）

1 rem基础

rem单位

2 媒体查询

2.1 什么是媒体查询

2.2 语法规范

案例：根据页面宽度改变背景颜色

2.3 媒体查询+rem实现元素动态大小变化

案例：媒体查询+rem实现元素变化

2.4 引入资源

3 Less基础

3.1 维护Css的弊端

3.2 Less介绍

Less使用

3.3 Less变量

3.4 Less编译

3.5 Less嵌套

3.6 Less运算

4 rem适配方案

4.1 rem实际开发适配方案

4.2 rem适配方案技术使用（市场主流）

4.3 rem实际开发适配方案1

5 苏宁易购首页案例制作

案例：苏宁网移动端首页

6 rem适配方案2

6.1 简洁高效的rem适配方案flexible.js

6.2 使用适配方案2制作苏宁移动端首页

6.3 VSCode px转换rem插件cssrem

459~486（rem+媒体查询+Less+苏宁易购移动端首页）相关推荐

最新文章

热门文章

6.3 VSCode px转换rem插件`cssrem`