响应式布局
一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验。
媒体类型
在何种设备或者软件上将页面打开
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{width:100px;height:100px;background-color:red;}
@media embossed{
/*盲文打印机是绿色*/
#box{background-color:green;}
}
@media tv{
/*在tv上是粉色*/
#box{background-color:pink;}
}
@media all{
/*在所有媒体上是红色*/
#box{background-color:red;}
} |
关键字
and:连接媒体类型和媒体特性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| @media all and (min-width:1201){ }
not:关键字是用来排除某种制定的媒体类型
@media not tv
only:只有在特定的某种设备上识别
@media only tv
媒体特性
min-width:当屏幕大小 大于等于 某个值的时候识别
max-width:当屏幕大小 小于等于 某个值的时候识别
orientation:横竖屏(portrait/landscape)
@media (orientation:portrait) { //竖屏的时候
div{ background-color: yellow; }
}
@media (orientation:landscape) { //横屏的时候
div{ background-color: green; }
} |
竖屏/横屏检测的原理是通过可视区的宽度和高度之间的比例进行检测的。但在移动端中可能会出现问题,比如点击一个文本输入框的时候,会弹出键盘,这个键盘会影响屏幕可是区域的宽高,这种情况会造成竖屏/横屏检测错误。
样式引入方式
样式表末尾添加
1
| @media all and (min-width:600px){ } |
link标签
1
| <link rel='stylesheet' href='css/01.css' media='all and (min-width:600px)' /> |
写在样式表头部
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <style>
@import url(01.css) (min-width:400px);
@import url(02.css) (min-width:600px);
@import url(03.css) (min-width:800px);
@import url(04.css) (min-width:1000px);
body{
margin: 0;
}
div{
height: 100px;
background-color: #f00;
border: 1px solid #000;
box-sizing: border-box;
float: left;
}
</style> |
https://www.w3.org/2010/05/video/mediaevents.html
常用的几种屏幕宽度设定:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| @media screen and (min-width: 1200px) {
css-code;
}
@media screen and(min-width: 960px) and (max-width: 1199px) {
css-code;
}
@media screen and(min-width: 768px) and (max-width: 959px) {
css-code;
}
@media screen and(min-width: 480px) and (max-width: 767px) {
css-code;
}
@media screen and (max-width: 479px) {
css-code;
} |
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"css3响应式布局"
最新评论