响应式布局
一个网站能够兼容多个终端，并且在各个终端都可以很好展示体验。
媒体类型
在何种设备或者软件上将页面打开
| 1 2 3 4 5 6 7 8 9 | all：所有媒体 braille：盲文触觉设备 embossed：盲文打印机 print：手持设备 projection：打印机预览 screen：彩屏设备 speech：'听觉'类似的媒体类型 tty：不适用像素的设备 tv：电视 |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | #box @media embossed } @media tv } @media all } |
关键字
and：连接媒体类型和媒体特性
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | @media all and(minwidth:1201) not：关键字是用来排除某种制定的媒体类型 @media not tv only：只有在特定的某种设备上识别 @media only tv 媒体特性 minwidth：当屏幕大小 大于等于 某个值的时候识别 maxwidth：当屏幕大小 小于等于 某个值的时候识别 orientation：横竖屏（portrait/landscape） @media(orientation:portrait) } @media(orientation:landscape) } |
竖屏/横屏检测的原理是通过可视区的宽度和高度之间的比例进行检测的。但在移动端中可能会出现问题，比如点击一个文本输入框的时候，会弹出键盘，这个键盘会影响屏幕可是区域的宽高，这种情况会造成竖屏/横屏检测错误。
样式引入方式
样式表末尾添加
| 1 | @media all and(minwidth:600px) |
link标签
| 1 | <link rel='stylesheet'href='css/01ss'media='all and (minwidth:600px)'/> |
写在样式表头部
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style> @importurl(01ss)(minwidth:px); @importurl(02ss)(minwidth:600px); @importurl(03ss)(minwidth:800px); @importurl(04ss)(minwidth:1000px); body div </style> |
w3/2010/05/video/mediaevents
常用的几种屏幕宽度设定：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @media screen and(minwidth:1200px) @media screen and(minwidth:960px)and(maxwidth:1199px) @media screen and(minwidth:768px)and(maxwidth:959px) @media screen and(minwidth:480px)and(maxwidth:767px) @media screen and(maxwidth:479px) |
上一篇：vue封装一个简单的div框选时间的组件
下一篇：简易版php文件上传_超详细详解
