目录
一、响应式布局
1、媒体/媒介查询:通过媒体类型进行查询
CSS2中主要是通过不同的媒体类型进行样式的选择,screen,print,speech等,CSS3继承了CSS2中的类型的同时,新增了通过屏幕设备宽度,分辨率等进行查询
语法方式:
1.针对不同媒体类型定义不同的样式
2.可以针对不同屏幕尺寸等设置不同样式
@media 查询条件
{
/*CSS样式*/
}
/*通过 link 使用不同的样式:*/
<link rel="stylesheet" media="mediaType and|not|only(屏幕尺寸)" href="***.css">
CSS2
媒体类型 | 描述 |
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等。 |
speech | 应用于屏幕阅读器等发声设备 |
CSS3
min-width | 定义输出设备中的页面最小可见区域宽度。 |
max-width | 定义输出设备中的页面最大可见区域宽度。 |
orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 大屏项目是横屏(landspace)还是竖屏(portrait) |
二、移动端布局
因为移动设备屏幕大小不一致,所以我们需要进行不同大小屏幕的适配。借助尺寸单位 vw(view width),即屏幕宽。
1、CSS函数:通过函数运算,得出一个结果
rgb(),rgba() | 颜色调用函数 |
max(),min() | 取最大/最小值,内容使用,隔开 |
var() | 用于插入自定义的属性值 自定义的属性名称必需以 -- 开头 |
attr() | 返回选择元素的属性值 |
2、calc()函数:用于动态计算长度值
(1)calc(表达式) 返回一个数值
语法规则:支持 + - * / 运算,运算符前后都需要保留一个空格,任何的长度值都可以使用calc()进行计算。(calc()函数使用标准的数学运算优先级规则)
width:calc(100% - 10px)
(2)布局
rem:相对于根元素字体大小的倍数
html
{
font-size:calc(100vw / n)
/*n为设计稿或者原图的宽度*/
/*计算取值后设计稿1px相当于网页1rem*/
}