rem适配布局

一、rem单位

em是相对于父元素的字体大小来说的，例：父亲的font-size:10px，孩子的width:10em表示是100px；

rem是相对于html的字体大小，例：html（根元素）设置的font-size:12px，其他元素（非根元素）设置width:2rem表示是24px；

优点：可以通过修改html里的文字大小，来改变页面中的元素大小，以达到整体控制。

二、媒体查询

1、基础知识

媒体查询（Media Query）是CSS3的新语法，@media可以针对不同的屏幕尺寸设置不同的样式。

2、语法规范

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

用@media开头，是声明；
mediatype是媒体类型，如：all—用于所有设备；print—打印机和打印预览；scree—用于电脑屏幕、平板电脑、智能手机等；
关键字：and—且；not—非，排除某个媒体类型，可以省略；only—指某个特定的媒体类型，可以省略；
media feature媒体特性必须有小括号包含，width可见宽度；min-width最小可见宽度；max-width最大可见宽度。

注：媒体查询里的最大值和最小值都是包含等于号的，所以如果是小于540px，应该写为max-width:539px。

需求：现要求屏幕尺寸>800px时是白色；500px<当前屏幕尺寸<=800px时是灰色；500px>当前屏幕尺寸时是黄色。

 <style>/* 在我们屏幕上  并且  最大宽度是800px（小于等于800）  的情况下去设置我们的样式 */@media screen and (max-width:800px) {body {background-color: #ccc;}}@media screen and (max-width:500px) {body {background-color: yellow;}}
</style>

3、引入资源

当不同屏幕尺寸对应不同的样式时，可以针对不同媒体引入不同样式比表。

语法规范：

需求：屏幕大于1040px，一行显示四个div；在1040px~640px，一行显示两个div；小于640，一行显示一个div。

<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>引入资源</title><!-- 屏幕大于1040px，一行显示四个div；在1040px~640px，一行显示两个div；小于640，一行显示一个div --><link rel="stylesheet" media="screen and (min-width:1041px) " href="../css/03大于1040.css"><link rel="stylesheet" media="screen and (min-width:641px) and (max-width:1040px)" href="../css/03小于1040大于640.css"><link rel="stylesheet" media="screen and (max-width:640px) " href="../css/03小于640.css">
</head><body><div>1</div><div>2</div><div>3</div><div>4</div>
</body>

03大于1040.css：
/* div{float: left;width: 25%;height: 100px;
} */
body{display: flex;
}
div{float: left;flex: 1;height: 100px;
}
div:nth-child(1){background-color: rgb(211, 247, 7);
}
div:nth-child(2){background-color: rgb(236, 227, 97);
}
div:nth-child(3){background-color: rgb(231, 144, 45);
}
div:nth-child(4){background-color: rgb(228, 238, 139);
}03小于1040大于640.css：
/* div{float: left;width: 50%;height: 100px;
} */
body{display: flex;flex-wrap: wrap;
}
div{float: left;flex: 50%;height: 100px;
}
div:nth-child(1){background-color: rgb(15, 247, 7);
}
div:nth-child(2){background-color: rgb(124, 233, 61);
}
div:nth-child(3){background-color: rgb(7, 241, 112);
}
div:nth-child(4){background-color: rgb(93, 216, 155);
}03小于640.css：
/* div{float: left;width: 100%;height: 100px;
} */
body{display: flex;flex-wrap: wrap;
}
div{float: left;flex: 100%;height: 100px;
}
div:nth-child(1){background-color: rgb(7, 219, 247);
}
div:nth-child(2){background-color: rgb(15, 116, 231);
}
div:nth-child(3){background-color: rgb(53, 92, 218);
}
div:nth-child(4){background-color: rgb(20, 4, 241);
}

三、less

1、基础知识

Less是CSS的一门扩展语言，也是CSS的预处理器。它在CSS的现有语法上加入了程序式语言的特性，引入了变量、运算、函数等功能，大大简化了CSS的编写，降低了CSS维护的成本。Less是一门CSS的预处理语言，它扩展了CSS的动态特性。

其他CSS的常见预处理器：Sass、Less、Stylus

2、Less使用

less文件的后缀是.less，修改后缀即可。

3、Less变量

语法：@变量名:值；

变量名命名规范：必须以@开头、不能包含特殊字符、不能以数字开头、区分大小写。

需求：定义一个粉色的变量。

// 定义一个粉色的变量
@color:pink;
body{background-color: @color;
}
div{color: @color;
}

4、Less编译

less文件html页面不能直接使用，需要编译生成css文件。

使用的插件：easy less插件是用来将less文件编译生成css文件的。安装完毕后重新加载vscode，后期的less文件保存后会自动生成css文件。

保存后自动生成的css文件会出现在同一目录下，且修改less文件里的内容后保存，css里的内容也会跟着改变。

5、Less嵌套

（1）、子元素——子元素的样式直接写到父元素里。

（2）、伪类选择器——伪类选择器（:hover）、伪元素选择器（::before）、交集选择器需要加上&符号。

6、Less运算

任何数字、颜色、变量都可以参与运算，Less提供了+、-、*、/算术运算。

运算符的左右两侧必须敲空格隔开；
两个数参与运算，如果只有一个数有单位，那最后的结果以此单位为准；
如果参与运算的两个数都有单位，且不一样，那最后的单位以第一个为准；
颜色也可以进行加减，但是要是带数字的（例：background-color: #666 - #222它的结果颜色是#444）；
也可以运用小括号进行复合算术。

7、rem适配方案

适配的原因：让一些不能等比自适应的元素，当设备尺寸发生变化的时候，可以等比例适配当前设备。

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

适配的方案：1、rem+媒体查询+less技术

2、flexible.js+rem

vscode使用rem、媒体查询@media（图文详解，代码展示）相关推荐

媒体查询Media Queries详解
@media 标签可以说是响应式网页的开发基础.其主要由媒体类型(Media Type)和媒体特性(Media Query)两部分组成. Media Type 设定后面规则生效的展示类型,包括all ...
php强类型 vscode,VSCode + WSL 2 + Ruby环境搭建图文详解
vscode配置ruby开发环境 vscode近年来发展迅速,几乎在3年之间就抢占了原来vim.sublime text的很多份额,犹记得在2015-2016年的时候,ruby推荐的开发环境基本上都是 ...
使用浏览器免费下载MP3，MP4等可在线播放的媒体资源（图文详解）。
使用浏览器免费下载MP3,MP4等可在线播放的媒体资源第一步进入你想要的媒体页面,本文任意使用一个网站(申明仅供学习使用,任何商用与本人无关). 2.按键盘f12,进入开发者页面. 3.点击Netw ...
fiddler修改支付金额_Spring MVC+Spring+Mybatis实现支付宝支付功能（图文详解+代码
师长说: 之前师长就发过一篇超详细的微信支付文章:一文快速实现微信公众号支付功能(详细版,建议收藏备用),有人就说要雨露均沾...支付宝的也要.好的,这篇同样超详细的支付宝支付收藏好了! 前言本教程 ...
插入排序(动图演示,思路详解,代码展示)
一.插入排序 (一).基本思想把待排序的的几个值按照顺序逐个插入到一个已经排好序的有序序列中,直到所有值插入完成,得到一个新的有序序列. (二).举例 (三).动图演示 1.全过程动图演示 2.一趟 ...
html5移动端开发(rem和媒体查询@media)
css下:index.css @charset "utf-8"; body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fields ...
媒体查询(@media语法、案例)详解
媒体查询 @media 语法 1. 直接写在 CSS 样式中 2. 针对不同的媒体设备,从外部链入不同的 stylesheets(外部样式表) 使用 @media 实现网页变色龙 @media 语法 ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
459~486（rem+媒体查询+Less+苏宁易购移动端首页）
1 rem基础 rem单位 rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-si ...

vscode使用rem、媒体查询@media（图文详解，代码展示）

rem适配布局

一、rem单位

二、媒体查询

1、基础知识

2、语法规范

3、引入资源

三、less

1、基础知识

2、Less使用

3、Less变量

4、Less编译

5、Less嵌套

6、Less运算

7、rem适配方案

vscode使用rem、媒体查询@media（图文详解，代码展示）相关推荐

最新文章

热门文章