Rem 单位
- 是一个相对单位 类似于em em是父元素字体大小
- rem只受html控制
- 原理:页面中只有一个html元素 所以可以通过html 来定义font-size大小 来改变整个页面中元素的大小达到整体的控制
/* 一般写在媒体查询中 */
html {
font-size: 12px;
}
※媒体查询 media
媒体查询(Media Query)是CSS3新语法
当项目宽度到xxx大小后设置对应css属性
推荐从小到大写 因为有就近原则覆盖性 可以使代码更简洁
@media mediatype and|not|only (media feature) {
html {
font-size:75px;
}
}
/* 如果文档宽度小于 300 像素则修改背景颜色(background-color): */
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
/* 如果屏幕宽度超过了750px 依旧按照750的设计稿走 不会让页面超过750px */
@media screen and (min-width: 750px) {
html {
font-size: 75px !important;
}
}
/* 媒体查询的常用尺寸 */
@media screen and (min-width:1200px){ ... } /* 大型设备(大台式电脑,1200px 起) */
@media screen and (min-width:992px){ ... } /* 中型设备(台式电脑,992px 起) */
@media screen and (min-width:768px) { ... } /* 小型设备(平板电脑,768px 起) */
@media screen and (min-width:480px){ ... } /* 超小设备(手机,小于 768px) */
查询类型 mediatype
将不同的终端设备划分成不同的类型,称为媒体类型
值 | 解释说明 |
---|---|
all | 所有设备 |
打印机和打印预览 | |
scree* | 用于电脑屏幕 平板电脑 只能手机 |
关键词 and/not/only
- ※and 将多个媒体特性链接在一起 且的意思
- not 排除某个媒体类型 非的意思 可省略
- only 指定特定媒体类型 可省略
常用媒体特性 media feature
值 | 解释说明 |
---|---|
width | 定义输出设备中页面可见区域的宽度 |
min-width | 定义输出设备中页面最小可见区域的宽度 |
max-width | 定义输出设备中页面最大可见区域的宽度 |
注:
- 不能省略单位
- 用小括号包含
- 最小宽度:大于或等于
最大宽度:小于或等于
媒体查询+rem实现动态大小变化
<style>
@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>
<body>
<div class = "top">购物车</div>
</body>
理解为一个名为font-size的选择器 数值单位设置了rem都可以被控制 数值 font-size=盒子宽高 媒体查询相当于定义了关键帧 font-size会随着用户屏幕大小来变动
媒体查询引入资源
原理 :直接在link标签中判断并读取尺寸css文件 输入顺序从小到大
语法:
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="文件路径.css">
<!-- 实际运用 -->
<link rel="stylesheet" href="文件路径.css" media="screen and (min-width: 320px)" >
Less基础
css弊端:代码重复 代码结构差不便于维护 没有计算能力
less:是css扩展语言 也称css预处理器 扩展了动态特性
less的特点:可以运算和嵌套 自定义变量名称
基于nodejs的安装: npm install -g less
检查是否安装成功: lessc -v
基于浏览器的使用:
-
引入less主文件
<script src=”less.js” type =”text/javascript”></script> <script src="cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
-
引入缩写less文件
<Link rel=”stylesheet/less” type=”text/css” href=”style.less”/>
less文件中导入less主文件: @import "文件名"
less的变量定义
语法:@变量名:值;
使用:哪需要哪调用这个变量名
变量名命名规范:
- 必须有@前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写名称各不同
- _可以?也可以
※Easy LESS 插件
作用:把less文件编译成css文件 并且能和生成的css文件同步更新
使用方法:
vocode Less商店中搜索下载
将插件生成的css文件引入到所需html中
特点:
less嵌套
子元素直接写在父元素里面
伪类、伪元素 用&=“且” 符号链接父元素
子代选择器:> 元素名 {
// xxx
}
注释:// 快捷键ctrl+/
※less运算
+加 -减 *乘 /除 元素名:数值 - 50rem;
1.两个数值只有一个单位 根据那个单位为准
2.都有单位时 并不同 以第一个单位为准
3.运算符左右用空格隔开
rem实际开发 ↓
rem适配方案1
组成:媒体查询+less+rem
面对不同尺寸屏幕 页面要等比例缩放 需要一个标杆 根据这个比例来实现页面中dom元素的缩放 这个标杆比例就是通过设计稿的预先固定的大小和划分的份数得出来的font-size
元素大小取值公式:页面元素值px / (屏幕宽度:750px / 划分的份数:自定义 15、10) = 页面元素的rem值
(屏幕宽度:750px / 划分的份数:自定义 15、10) = font-size
页面元素值px / font-size 可以使用VScode商店中的cssrem插件来协助计算
cssrem插件:px单位转换为rem单位 默认的转换单位是16px 通过填入当前标准稿的font-size大小来转换rem单位
- 页面元素值:页面的Dom元素大小 div等一些px为单位的元素
- 划分份数:自定义 为了方便计算常用10 15
- 屏幕宽度:用户可视界面宽 移动端一般750px
例:
- 页面元素100px 屏幕宽度750px 划分10 份
- font-size值为75px
- 页面元素1.3333rem=100px 1rem=75px
@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;
}
rem适配方案2 √
组成:rem + flexible.js
原理:默认划分为10份 在不同设备下 比例还是一致的
优点:flexible省略了各个比例下定义的媒体查询 比起方案1要更加简洁 页面缩放效果也更加平滑
例题
flexible是按照当前屏幕来划分十等份 案例里面body设置了10rem
当前屏幕相乘之后又变回了原来的大小
/* 当屏幕宽度超过750px 还是按照750px设计稿的样式 */
@media screen and (min-width: 750px) {
html {
font-size: 75px !important;
}
}