- rem基础
rem单位是是一个相对单位,相对于HTML元素的字体大小,和em不同
通过修改HTML里面的文字大小来改变页面中元素的大小可以整体控制
2.1 媒体查询(media query)
使用@media查询,可以针对不同的媒体类型定义不同样式
可以针对不同屏幕尺寸设置不同样式
在重置浏览器大小的过程中,会根据浏览器宽高重新渲染页面
2.2 语法规范
@media media type and|not|only (media feature) {
CSS-Code
}
mediatype查询类型
all: 用于所有设备
print: 用于打印机和打印预览
scree: 用于电脑和手机屏幕
2.3 媒体特性
width: 定义输出设备中页面可见区域的宽度
min-width: 定义输出设备中页面最小可见区域的宽度
max-width: 定义输出设备中页面最大可见区域的宽度
注意:媒体特性要由小括号包含
2.4 引入资源
当样式比较多的时候,我们可以针对不同媒体使用不同样式表,
其原理就是直接在link中判断设备的尺寸,然后引用不同的css文件
3.1 less基础
CSS是一门非程序式语言,没有变量,函数,作用域等概念
CSS需要书写大量代码,冗余度较高
不方便维护及扩展,不利于复用
CSS没有很好的计算能力
3.2 less介绍
less是一门CSS扩展语言,也称为CSS预处理器(less,sass,stylus)
在CSS的基础上,为CSS加入程序式语言的特征
引入了变量,Mixin,运算及函数等功能
3.3 less安装
安装node.js 使用cmd命令输入"node -v"检验
使用cmd命令"npm install -g less"安装less
输入"less -v"检验
3.4 less使用
less变量:
@变量名:值;
变量名必须以@开头 不能包含特殊字符 不能以数字开头 大小写敏感
less编译
vocode less插件 保存后自动生成CSS文件
less嵌套
子元素的样式直接写到父元素
如果遇到(交集/伪类/伪元素选择器)
内层选择器前面没有&号,则它被解析为父选择器的后代
如果有&号,就被解析为父元素自身或父元素的伪类
less运算
任何数字,颜色或者变量都可以参与运算,less提供了加减乘除算数运算
运算符左右两边必须要有空格隔开
对于两个不同单位之间的运算,取第一个值的单位
4. rem适配方案
按照设计稿与设备宽度的比例,动态计算并设置HTML标签font-size的大小(媒体查询)
CSS中,设计稿元素的宽高,相对位置等取值,按照同等比例换算为rem的值
移动布局基础之 rem适配布局
最新推荐文章于 2024-04-05 17:38:08 发布