响应式所具有的特点:
1.网页的宽度自动调整
2.尽量少用绝对宽度
3.字体要使用rem、em做为单位
4.布局要是用浮动、弹性布局
@规则
@chartset 定义编码
@import 引入css文件(css模块化)
@font-face 自定义
@keyframes animation里的关键帧
@media 媒体查询
媒体查询:基于一个或多个基于设备类型、具体特点和环境阿里应用样式
@media
1.媒体类型
2.媒体特性
3.逻辑运算符
媒体查询:
all 所有设备
print 打印机设备
screen 彩色的电脑屏幕
speech听觉设备(针对有视力障碍的人士,可以把页面的内容以语音的方式呈现的设备)
注意:tty、tv、projection、handheld、braille、embossed、aural等几种类型在媒体查询4中已经废弃
媒体特性:
width 宽度
min-width 最小宽度,宽度只能比这个大
max-width 最大宽度,宽度只能比这个小
height 高度
min-height 最小高度,高度只能比这个大
max-height 最大高度,高度只能比这个小
orientation 方向
landscape 横屏(宽度大于高度)
portrait 竖屏(高度大于宽度)
aspect-ratio 宽度比
-webkit-device-pixel-ratio 像素比(webkit内核的私有属性)
逻辑运算符: 用来做条件判断
and 合并多个媒体查询(并且的意思)
, 匹配某个媒体查询(或者的意思)
not 对媒体查询结果取反
only 仅在媒体查询匹配成功后应用样式(防范老旧浏览器)