响应式设计

最新推荐文章于 2024-08-22 06:02:10 发布

哲子君

最新推荐文章于 2024-08-22 06:02:10 发布

阅读量664

点赞数 1

分类专栏：移动端

本文链接：https://blog.csdn.net/zhzijun/article/details/112912036

版权

移动端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

rem

响应式设计

响应式设计

“响应式设计（Responsive Design）” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！

1.rem

1.1 为什么使用 rem 布局

前两两种布局方式一直没有解决两个问题

页面中的文字不能随着屏幕变化而变化，比如前面的仿京东页面
百分比布局和flex布局主要针对宽度布局，高度一致被忽视

采用 rem 布局，可以让屏幕发生变化时，元素的高度和宽度以及文字大小等能够等比例缩放

1.2 rem单位

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

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

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

html {
	font-size: 12px;
}

.box {
	width: 10rem;
	height: 10rem;
	background-color: orange;
	font-size: 1.5rem;
	color: #fff;
	text-align: center;
	line-height: 10rem;
}

<div class="box">hello rem</div>

展示效果（我们可以通过调整字体大小，观察盒子变化）:

任务单.gif

rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

1.3px、em 和 rem 还有 % 三者区别

px

px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的

特点

IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem，但是有大部分的国产浏览器使用IE内核。

em

em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）

如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸

特点：

em的值并不是固定的；
em会继承父级元素的字体大小

rem

rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位

如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px

html{font-size: 62.5%}  /* 10 ÷ 16 × 100% = 62.5% */

body{font-size: 1.4rem;} /* 1.4 × 10px = 14px *//*在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）*/

优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好

rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem

特点：

rem 相对单位，相对于根元素 <html> ;
相对大小和绝对大小的优点于一身;
修改根元素就成比例地调整所有字体大小;
避免字体大小逐层复合的连锁反应.

%（百分比）

一般来说就是相对于父元素

特点：

对于普通定位元素就是我们理解的父元素
对于position: absolute;的元素是相对于已定位的父元素
对于position: fixed;的元素是相对于ViewPort（可视窗口）

px、em和rem 的问题：

使用 px 设置字体大小时，存在一个问题:

当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。

二者比较	em	rem
单位基于	基于使用他们的元素的字体大小	基于 html 元素的字体大小。
继承	可能受任何继承的父元素字体大小影响	可以从浏览器字体设置中继承字体大小。
使用情况	使用em单位应根据组件的字体大小而不是根元素的字体大小。不使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。	使用rem单位，除非你确定你需要 em 单位，包括对字体大小。

注意：

媒体查询中使用 rem 单位。
不要在多列布局中使用 em 或 rem ,改用%。
不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。

2.媒体查询

2.1 为什么使用媒体查询

上面案例中，使用rem作为元素的单位

元素的尺寸就会随着 html 中 fong-size 的变化而变换

当屏幕较大时，设置 font-size 为较大值，元素就会变大；当屏幕较小时，设置 font-size 为较小值，元素就会变小

问题来了：如何在屏幕大小发生变化时，改变 html 的 font-size 的值呢，换言之，如果在不同大小的屏幕中渲染当前页面时，动态的根据当前屏幕初始化 html 的 font-size 的值呢？

媒体查询是一种比较友好的方式，但不是唯一的方式

2.2 定义和使用：

媒体查询（Media Query）是CSS3新语法。

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

2.3 CSS 语法：

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

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

2.4 逻辑操作符：

操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询

2.4.1 and

and操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真

注意：在不使用not或only操作符的情况下，媒体类型是可选的，默认为all

满足横屏以及最小宽度为700px的条件应用样式表

@media all and (min-width: 700px) and (orientation: landscape) { ... }

由于不使用not或only操作符的情况下，媒体类型是可选的，默认为 all，所以可以简写为

@media (min-width: 700px) and (orientation: landscape) { ... }

2.4.2 or

将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真，相当于or操作符

满足最小宽度为700像素或是横屏的手持设备应用样式表

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

2.4.3 not

not操作符用来对一条媒体查询的结果进行取反

注意：not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询

2.4.4 only

only操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

media="only screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media=“only”，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式

media="screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media=“screen”，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式

所以，在使用媒体查询时，only最好不要忽略

2.4.5 `,` (逗号)

逗号用于将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为true，则整个media语句均返回true。换句话说，列表的行为类似于逻辑或or运算符。

 @media screen and (max-width:600px),(min-width:900px) {
     body{
         background-color: #000;
}

2.5 媒体类型：

将不同的终端设备划分成不同的类型，称为媒体类型

值	描述
all	用于所有设备
aural	已废弃。用于语音和声音合成器
braille	已废弃。应用于盲文触摸式反馈设备
embossed	已废弃。用于打印的盲人印刷设备
handheld	已废弃。用于掌上设备或更小的装置，如PDA和小型电话
print	用于打印机和打印预览
projection	已废弃。用于投影设备
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备
tty	已废弃。用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	已废弃。用于电视和网络电视

2.6 媒体功能：

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。

注意他们要加小括号包含

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

2.6.1案例：

2.6.1.1 5 不同屏幕宽度设置body背景：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>媒体查询</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<style>
			@media screen and (min-width:320px){
                /*当屏幕>=320px时，颜色改变*/
				body{
					background-color: aqua;
				}
			}
			@media screen and (min-width:750px) {
				body{
                     /*当屏幕>=750px时，颜色改变*/
					background-color: blue;
				}
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

效果展示：

任务单.gif

注意：如果颠倒顺序，因为后面的 min-width 320 其实包含了前面 minwidth 750，就会导致 minwidth 750 的设置失效

2.6.1.2 通过媒体查询改变文字大小

@media screen and (min-width: 320px) {
    html {
        font-size: 12px;
    }
}
@media screen and (min-width: 640px) {
    html {
        font-size: 16px;
    }
}
@media screen and (min-width: 1020px) {
    html {
        font-size: 20px;
    }
}
.box {
    width: 10rem;
    height: 10rem;
    background-color: orange;
    font-size: 1.5rem;
    color: #fff;
    text-align: center;
    line
}

<div class="box">hello rem</div>

效果展示：(文字随着屏幕的拖动变大变小)

实现的效果

2.7 媒体查询书写规则

注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁

还是利用设置body背景的小案例

@media screen and (max-width: 800px) {
    body{
        background-color: #ccc;
    }
}

当屏幕宽度<=800px 像素时，body背景颜色为 #ccc

还可以在划分一个挡位

@media screen and (max-width: 800px) {
    body{
        background-color: #ccc;
    }
}
@media screen and (max-width:540px) {
body{
    background-color: #666;
    }
}

当屏幕宽度<=840px 像素时，body背景颜色为 #ccc

当屏幕宽度<=540px 像素时，body背景颜色为 #666

在这里插入图片描述

书写顺序 如果把上面的媒体查询颠倒一下顺序

@media screen and (max-width:540px) {
    body{
        background-color: #666;
    }
}
@media screen and (max-width: 800px) {
    body{
        background-color: #ccc;
    }
}

下面的设置就不再生效了，因为第二个设置包含第一个，所以我们把握住一个原则：前面的设置不能包含在后面的媒体查询中，否则就会失效

@media screen and (max-width:540px) {
    body{
        background-color: #666;
    }
}

又比如下面的代码就没有问题，但是如果颠倒顺序，因为后面的 min-width 320 其实包含了前面 minwidth 750，就会导致 minwidth 750 的设置失效

@media screen and (min-width: 320px) {
body {
    background-color: red;
    }
}
@media screen and (min-width: 750px) {
    body {
        background-color: blue;
    }
}

2.8 媒体特性

媒体查询获取的宽度是页面中设置的 viewport 的 width 宽度

媒体特性（Media features）描述了 user agent、输出设备，或是浏览环境的具体特征。媒体特性表达式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来

下面是mdn 中列出的所有的媒体特性，有新的特性倍添加，也有旧的特性被废弃

名称	简介	备注
`any-hover`	是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？	在 Media Queries Level 4 中被添加。
`any-pointer`	可用的输入机制中是否有任何指针设备，如果有，它的精度如何？	在 Media Queries Level 4 中被添加。
`aspect-ratio`	视窗（viewport）的宽高比
`color`	输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0
`color-gamut`	用户代理和输出设备大致程度上支持的色域	在 Media Queries Level 4 中被添加。
`color-index`	输出设备的颜色查询表（color lookup table）中的条目数量，如果设备不使用颜色查询表，则该值为 0
`device-aspect-ratio`	输出设备的宽高比	已在 Media Queries Level 4 中被弃用。
`device-height`	输出设备渲染表面（如屏幕）的高度	已在 Media Queries Level 4 中被弃用。
`device-width`	输出设备渲染表面（如屏幕）的宽度	已在 Media Queries Level 4 中被弃用。
`display-mode`	应用程序的显示模式，如web app的manifest中的`display` 成员所指定	在 Web App Manifest spec被定义.
`forced-colors`	检测是user agent否限制调色板	在 Media Queries Level 5 中被添加。
`grid`	输出设备使用网格屏幕还是点阵屏幕？
`height`	视窗（viewport）的高度
`hover`	主要输入模式是否允许用户在元素上悬停	在 Media Queries Level 4 中被添加。
`inverted-colors`	user agent或者底层操作系统是否反转了颜色	在 Media Queries Level 5 中被添加。
`light-level`	环境光亮度	在 Media Queries Level 5 中被添加。
`monochrome`	输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0
`orientation`	视窗（viewport）的旋转方向
`overflow-block`	输出设备如何处理沿块轴溢出视窗(viewport)的内容	在 Media Queries Level 4 中被添加。
`overflow-inline`	沿内联轴溢出视窗(viewport)的内容是否可以滚动？	在 Media Queries Level 4 中被添加。
`pointer`	主要输入机制是一个指针设备吗？如果是，它的精度如何？	在 Media Queries Level 4 中被添加。
`prefers-color-scheme`	探测用户倾向于选择亮色还是暗色的配色方案	在 Media Queries Level 5 中被添加。
`prefers-contrast`	探测用户是否有向系统要求提高或降低相近颜色之间的对比度	在 Media Queries Level 5 中被添加。
`prefers-reduced-motion`	用户是否希望页面上出现更少的动态效果	在 Media Queries Level 5 中被添加。
`prefers-reduced-transparency`	用户是否倾向于选择更低的透明度	在 Media Queries Level 5 中被添加。
`resolution`	输出设备的像素密度（分辨率）
`scan`	输出设备的扫描过程（适用于电视等）
`scripting`	探测脚本（例如 JavaScript）是否可用	在 Media Queries Level 5 中被添加。
`update`	输出设备更新内容的渲染结果的频率	在 Media Queries Level 4 中被添加。
`width`	视窗（viewport）的宽度，包括纵向滚动条的宽度

其实，除了上面的特性，还有一些特性虽然不能被所有浏览器支持，但也能被部分支持

width：此特性又有 max-width 和 min-width 两个扩展，实际开发中，这两个扩展用的是最多的
-webkit-device-pixel-ratio：是一个非标准的布尔类型CSS媒体类型，获取的媒体的 dpr(https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/-webkit-device-pixel-ratio)
-webkit-max-device-pixel-ratio：最大的 drp
-webkit-min-device-pixel-ratio：最小 dpr
orientation：CSS 媒体属性屏幕方向（ orientation ）可用于测试视口 viewport（或者对于分页媒体而言的页面框盒）的横纵d方向（https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/orientation）
- portrait：viewport 处于纵向，即高度大于等于宽度
- landscape：viewport 处于横向，即宽度大于高度

案例

当媒体的 dpr 为 2 时，body 的设置生效

@media (-webkit-device-pixel-ratio:2){
    body{
        background-color: red;
    }
}

当媒体的 drp 在 2 以下时，body 的设置生效

@media screen and (-webkit-max-device-pixel-ratio:2) {
    body{
        background-color: #000;
    }
}

当媒体的 dpr 在 2 以上时，body 的设置生效

@media screen and (-webkit-min-device-pixel-ratio:2) {
    body{
        background-color: #000;
    }
}

当媒体的 dpr 在2以上，并且为横向时，body 的设置生效

@media (-webkit-min-device-pixel-ratio:2) and (orientation: landscape) {
    body {
        background-color: red;
    }
}

2.9通过媒体查询实现响应式布局

通过媒体查询实现下面的效果

屏幕宽度 <=576px 时，每行显示1张图片
屏幕宽度>576px 并且 <=768px 时，每行显示2张图片
屏幕宽度>768px，并且<=992px 时，每行显示4张图片
屏幕宽度>992px，并且<=1200px 时，每行显示6张图片
屏幕宽度>1200px 时，每行显示12张图片

实现代码如下：

<body>
	<div class="row">
	    <div class="col">
	        <img src="./images/1.jpg" alt="">
	    </div>
	    <div class="col">
	        <img src="./images/1.jpg" alt="">
	    </div>
	    <div class="col">
	        <img src="./images/1.jpg" alt="">
	    </div>
	    <div class="col">
	        <img src="./images/1.jpg" alt="">
	    </div>
	    <div class="col">
	        <img src="./images/1.jpg" alt="">
	    </div>
	    <div class="col">
	        <img src="./images/1.jpg" alt="">
	    </div>
	    <div class="col">
	        <img src="./images/1.jpg" alt="">
	    </div>
	    <div class="col">
	        <img src="./images/1.jpg" alt="">
	    </div>
	    <div class="col">
	        <img src="./images/1.jpg" alt="">
	    </div>
	    <div class="col">
	        <img src="./images/1.jpg" alt="">
	    </div>
	    <div class="col">
	        <img src="./images/1.jpg" alt="">
	    </div>
	    <div class="col">
	        <img src="./images/1.jpg" alt="">
	    </div>
	</div>
</body>

css代码：

* {
  margin: 0;
  padding: 0;
}
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.col {
  padding: 10px 0;
  background-color: #000;
  box-sizing: border-box;
  border: 1px solid #000;
}
.col img {
  width: 100%;
  height: 100%;
}
/*  - 屏幕宽度 <=576px 时，每行显示1张图片
    - 屏幕宽度>576px 并且 <=768px 时，每行显示2张图片
    - 屏幕宽度>768px，并且<=992px 时，每行显示4张图片
    - 屏幕宽度>992px，并且<=1200px 时，每行显示6张图片
    - 屏幕宽度>1200px 时，每行显示12张图片 
*/
/* 移动端优先 */
@media (max-width: 576px) {
  .col {
    width: 100%;
  }
}
@media (min-width: 577px) and (max-width: 768px) {
  .col {
    width: 50%;
  }
}
@media (min-width: 769px) and (max-width: 992px) {
  .col {
    width: 25%;
  }
}
@media (min-width: 993px) and (max-width: 1200px) {
  .col {
    width: 16.66666667%;
  }
}
@media (min-width: 1201px) {
  .col {
    width: 8.33333333%;
  }
}

显示的样式效果：

任务单.gif

3. less基础

3.1 css 存在的问题

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

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

3.2 Less 介绍

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。

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

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

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

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

3.3 Less安装

安装nodejs，网址：http://nodejs.cn/download/

检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） —输入“node –v”查看版本即可
基于nodejs在线安装Less，使用cmd命令“npm install less”即可

3.4 为什么要使用LESS？

LESS支持创建更清洁，跨浏览器友好的CSS更快更容易。
LESS是用JavaScript设计的，并且创建在 live 中使用，其编译速度比其他CSS预处理器更快。
LESS保持你的代码以模块化的方式，这是非常重要的，通过使其可读性和容易改变。
可以通过使用LESS 变量来实现更快的维护。

3.5less编写和编译

先创建 .less 文件，然后将其编译成最终使用的css文件，因为 html 文件只能引入 css 文件

每次更新less文件后，需要重新编译成css文件

编写

@color:orange;
body {
    background-color: @color;
}
.box {
    width: 200px;
    height: 200px;
    background-color: @color;
}

编译

安装 vs code 插件 easy less

在 .less 文件中保存代码，就会自动生成同名的 css 文件

在 html 文件中引入 css 文件即可

3.5 less 语法

3.5.1 Less 使用之变量

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

@变量名:值;

必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感
less允许定义变量到全局样式中复用

3.5.2 less嵌套

它是一组 CSS 属性，允许将一个类的属性用于另一个类，并且包含类名作为其属性。
在 LESS 中，可以使用类或 id 选择器以与 CSS 样式相同的方式声明 mixin。
它可以存储多个值，并且可以在必要时在代码中重复使用。
Mixins代表的是一种特性是一种混入继承模式，当使用less语法实现css时我们也可以实现这样的模式

例如：

.swipe{
    position: relative;
    overflow: hidden;
    li{
        position: relative;
        float: left;
        overflow: hidden;
    }
    img{
        width: 100%;
        max-width: 750rem/50;
    }
}

如果遇见（交集|伪类|伪元素选择器），利用&进行连接

a:hover{
    color:red;
}
a{
    &:hover{
        color:red;
    }
}

3.5.3 less 运算

LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)，它们可以对任何数字，颜色或变量进行操作。操作节省了大量的时间，当你使用变量，让感到就像是简单的数学工作

/*Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
    border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;

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

3.5.4 less 注释

注释的适当使用可以保证代码的可读性，Less 支持两种类型的注释：多行注释和单行注释。

注释使代码清晰，并允许用户轻松地理解。您可以在代码中使用块样式和行内注释，但是当编译LESS代码时，单行注释不会显示在CSS文件中。

less 文件

.col {
    padding: 10px 0;
    background-color: #000;
    box-sizing: border-box;
    //border: 1px solid #000;
}
/* .col img{
    width: 100%;
    height: 100%;
} */

转义的 css文件

.col {
  padding: 10px 0;
  background-color: #000;
  box-sizing: border-box;
}
/* .col img{
    width: 100%;css
    height: 100%;
} */

3.5.5 Less 导入

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";

3.5.6转义

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。

less的写法

@m123: ~"(min-width: 768px)";
.element {
  @media @m123 {
    font-size: 20rem;
  }
}

转义后的css

@media (min-width: 768px) {
  .element {
    font-size: 20rem;
  }
}

注意，从 Less 3.5 开始，可以简写为：

@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了。

4. rem适配方案

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

技术方案：

less+rem+媒体查询
flexible.js+rem

总结：

两种方案现在都存在。

方案2 更简单，现阶段大家无需了解里面的js代码。

4.1 rem实际开发适配方案

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

总结：

①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）

②屏幕宽度/划分的份数就是 htmlfont-size 的大小

③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

哲子君

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

响应式设计

rem

响应式设计

1.rem

1.1 为什么使用 rem 布局

1.2 rem单位

1.3px、em 和 rem 还有 % 三者区别

px

特点

em

特点：

rem

特点：

%（百分比）

特点：

px、em和rem 的问题：

使用 px 设置字体大小时，存在一个问题:

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。

2.媒体查询

2.1 为什么使用媒体查询

2.2 定义和使用：

2.3 CSS 语法：

2.4 逻辑操作符：

2.4.1 and

2.4.2 or

2.4.3 not

2.4.4 only

2.4.5 , (逗号)

2.5 媒体类型：

2.6 媒体功能：

2.6.1案例：

2.6.1.1 5 不同屏幕宽度设置body背景：

2.6.1.2 通过媒体查询改变文字大小

2.7 媒体查询书写规则

2.8 媒体特性

案例

2.9通过媒体查询实现响应式布局

3. less基础

3.1 css 存在的问题

3.2 Less 介绍

3.3 Less安装

3.4 为什么要使用LESS？

3.5less编写和编译

3.5 less 语法

3.5.1 Less 使用之变量

3.5.2 less嵌套

3.5.3 less 运算

3.5.4 less 注释

3.5.5 Less 导入

3.5.6转义

4. rem适配方案

4.1 rem实际开发适配方案

2.4.5 `,` (逗号)