rem (root em)是一个相对单位,类似于em,em是父元素字体大小,rem的基准是相对于html元素的字体大小。
比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}
rem的优势:父元素文字大小可能不一致, 但是整个页面只有一个html,可以很好来控制整个页面的元素大小。
媒体查询(Media Query)是CSS3新增的语法。
/* 语法格式 */
@media mediatype and|not|only (media feature) {
CSS-Code;
}
将不同的终端设备划分成不同的类型,称为媒体类型
值 | 说明 |
---|---|
all | 所有设备 |
打印机或者打印预览 | |
screen | 电脑、平板、智能手机的屏幕 |
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
注意他们要加小括号
值 | 说明 |
---|---|
width | 输出设备中可见区域宽度 |
min-width | 输出设备中最小可见区域宽度 |
max-width | 输出设备中最大可见区域宽度 |
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
/* 默认的样式 */
div{
background: orange;
width: 400px;
height: 400px;
}
/* 针对显示屏幕,且其最大宽度是1000px的时候(也就是屏幕宽度小于1000px的时候) */
@media screen and (max-width: 1000px) {
/* 下面就是满足条件的时候设置的样式 */
div{
background: red;
width: 300px;
height: 300px;
}
}
/* 针对显示屏幕,也就是屏幕宽度大于501px并且小于800px的的时候 */
@media screen and (min-width: 501px) and (max-width: 800px) {
/* 下面就是满足条件的时候设置的样式 */
div{
background: green;
width: 200px;
height: 200px;
}
}
/* 针对显示屏幕,且其最大宽度是500px的时候(也就是屏幕宽度小于500px的时候) */
@media screen and (max-width: 500px) {
/* 下面就是满足条件的时候设置的样式 */
div{
background: blue;
width: 100px;
height: 100px;
}
}
style>
head>
<body>
<div>div>
body>
html>
注意: 为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写,比如从小到大可以这样规划:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./big.css" media="screen and (min-width: 800px)">
<link rel="stylesheet" href="./small.css" media="screen and (max-width: 800px)">
<title>Documenttitle>
head>
<body>
<div>我爱祖国div>
<div>我是祖国的花朵div>
body>
html>
/* big.css */
div{
height: 400px;
width: 50%;
float: left;
}
div:nth-child(1){
background: red;
}
div:nth-child(2){
background: orange;
}
/* small.css */
div{
height: 400px;
width: 100%;
float: left;
}
div:nth-child(1){
background: red;
}
div:nth-child(2){
background: orange;
}
有了媒体查询和rem,我们就可以更灵活的制作自动变化的页面,包括文字大小等。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
@media screen and (min-width: 801px) {
html{
font-size: 50px;
}
}
@media screen and (min-width: 501px) and (max-width: 800px) {
html{
font-size: 30px;
}
}
@media screen and (max-width: 500px) {
html{
font-size: 20px;
}
}
div{
font-size: 0.5rem;
height: 1rem;
width: 100%;
background-color: blueviolet;
color: snow;
line-height: 1rem;
}
style>
head>
<body>
<div>我好帅啊!div>
body>
html>
CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。
Less(LeanerStyle Sheets 的缩写)是一门 CSS扩展语言,也成为CSS预处理器。
做为 CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入一些编程语言的特性。比如它引 入了变量,Mixin(混入),运算以及函数等功能,这就大大简化了 CSS 的编写,并且降低了 CSS的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情。Less中文网址:http://lesscss.cn/
当然除了Less,CSS常见的预处理器还有Sass、Stylus等。
①安装node.js,网址:http://nodejs.cn/download/
②检查是否安装成功,使用cmd命令(win10是window+r 打开运行输入cmd) —输入“node –v”查看版本即可
③基于nodejs在线安装Less,使用cmd命令“npm install -g less”即可
④检查是否安装成功,使用cmd命令“ lessc -v ”查看版本即可
新建一个文件,可以根据自己的需求随意命名,不过文件后缀名要是.less
,比如:test.less
。
变量是指其值可以随意变化的量,也就是说值不固定。
// 变量的声明规则
@变量名:值;
// 定义颜色变量
@color1: grey;
@color2: red;
@font14: 14px;
@font20: 20px;
.c1{
// 使用颜色变量
color: @color1;
background: @color2;
font-size: @font14;
}
.c2{
color: @color2;
background: @color1;
font-size: @font20;
}
我们写好的less文件,并不能直接被我们的html页面直接使用,需要编译生成css文件后才能使用,编译less文件的方法有很多,目前我们可以使用vscode的easy less
插件进行编译。
easy less
插件easy less
插件安装完毕后(有的版本的vscode需要重新重新启动),只要保存一下我们编写的Less文件,会在同一级目录中自动生成一个同名的CSS文件。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./test.css">
<title>Documenttitle>
head>
<body>
<header>
<div class="content">
<a href="">中国a>
<a href="">河南a>
<a href="">郑州a>
<a href="" class="address">打玉米/a>
div>
header>
body>
html>
// test.less
header{
height: 50px;
background: red;
// 下级可以直接嵌套编写
.content{
height: 30px;
background: green;
// 下级可以直接嵌套编写
a{
color: orange;
font-size: 14px;
// 伪类需要在前面加个&符号
&:hover{
color: chartreuse;
}
// 伪元素也是要在前面加个&符号
&::after{
content: '我好帅';
}
// 交集也是要在前面加个&符号
&.address{
text-decoration: none;
}
}
}
}
/* 编译生成的 test.css */
header {
height: 50px;
background: red;
}
header .content {
height: 30px;
background: green;
}
header .content a {
color: orange;
font-size: 14px;
}
header .content a:hover {
color: chartreuse;
}
header .content a::after {
content: '书生';
}
header .content a.address {
text-decoration: none;
}
任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。
// test.less
/* 这种注释编译生成的文件中也存在 */
// 这种注释在编译生成的文件中不存在
@border: 10px + 5;
div {
height: 300px * 1.5;
width: 300px / 2;
border: @border solid red;
// 还能运行较复杂的运算
border-radius: (@border - 5) * 2;
// 由于前四位代表的ffff 换算成十进制已经分别到255了,再加就溢出了,
// 因此即使加20,还是按照255算,因此还是ffff
// 最后两位的计算方式:
// 十六进制转成十进制 60 = 6 * 16 + 0 = 96
// 使用十进制 进行运算 96 + 20 = 116
// 将运算后的结果转成16进制 116 / 16 结果是7余4,那么运算的结果就是74
// 所以 #ffff60 + 20 最后的结果应该是: #ffff74
color: #ffff60 + 20;
// 40 + 20 = 60 换算成16进制 60/16 等于3余12 所以结果为 3c
// 50 + 20 = 70 换算成16进制 70/16 等于4余6 所以结果为 46
// 60 + 20 = 80 换算成16进制 80/16 等于5余0 所以结果为 50
// 因此结果应该为 #3c4650
color: rgb(40, 50, 60) + 20;
}
10px + 5
我们知道,在css中,我们是可以导入其它样式的,比如:
/* index.css */
/*
在这里使用@import + 样式路径的形式导入其它样式
注意:
1. 必须在css开头使用@import
2. 结尾一定要有分号
*/
@import "./common.css";
/* 两种写法都正确 */
@import url("./common.css");
div:nth-child(1){
width: 100px;
height: 100px;
background-color: aqua;
}
/* common.css */
div:nth-child(2){
width: 100px;
height: 100px;
background-color: darkmagenta;
}
其实在less中,可以直接按照css的写法处理,不过其自带的也有类似的用法,和原来的css的略有不同:
// index.less
// 这里不用谢后缀名
// 其实就相当于把需要导入的文件内容复制进来
@import "./common";
div:nth-child(1){
width: 100px;
height: 100px;
background-color: aqua;
}
// common.less
div:nth-child(2){
width: 100px;
height: 100px;
background-color: darkmagenta;
}
目的和思路:
具体到技术层面的实现方案:
① 假设设计稿是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) / (屏幕宽度 / 划分的份数)
② 屏幕宽度/划分的份数就是 html 的 font-size 的大小
③ 或者:页面元素的rem值 = 页面元素值(px) / html 的 font-size 字体大小
案例:苏宁首页
移动端苏宁首页地址 :http://m.suning.com
1、 技术选型
方案:我们采取单独制作移动页面方案
技术:布局采取rem适配布局(less + rem + 媒体查询)
设计图: 本设计图采用 750px 设计尺寸
2、搭建文件结构
css/
images/
upload/
index.html
3、设置视口标签以及引入初始化样式
"viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
"stylesheet" href="css/normalize.css">
4、设置公共common.less文件
// common.less
// 针对除了我们下面设置的宽度以外的宽度的效果,一定要写到最上面,不然会覆盖其它的,那么媒体查询效果就失效了
html {
font-size: 50px;
}
// 我们此次定义的划分的份数 为 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;
}
}
这是手机淘宝团队出的一款简洁高效的移动端可伸缩适配库,有了它我们再也不需要在写不同屏幕的媒体查询,因为里面js做了处理。
它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。
我们要做的,就是确定好我们当前设备的html 文字大小就可以了,比如当前设计稿是 750px, 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以了。
里面页面元素rem值计算方法: 页面元素的px值 / 75
github地址:https://github.com/amfe/lib-flexible,下载完后,只需要将index.js
或者index.min.js
引入到我们的项目中即可。其它的有该文件帮我们自动处理了。
说明:该项目原来叫:lib-flexible
,因为有问题,现在叫amfe-flexible
总结:
因为flexible是默认将屏幕分为10等份,但是当屏幕大于750的时候希望不要再去重置html字体了,因此要自己通过媒体查询设置一下,并且要把权重提到最高。
@media screen and (min-width: 750px) {
html {
font-size: 75px!important;
}
}
附:
VSCode 插件 cssrem
,他可以将我们像素单位自动的转化成rem单位,不过,由于cssrem
中参照的是html{font-size: 16px}
进行转换的,所以需要根据自己的实际情况进行配置。
按照我们自己的需求进行修改即可。修改完要重启vs code
。