响应式布局
媒询实现响应式媒询的导入方式从小到大响应式布局
媒询实现响应式
关键词：@media 与and 或， 横竖屏：orientation ：portrait / landscape 竖屏 / 横屏 像素比： -webkit-min-device-pixel-ratio: n
//基本媒询。屏幕最小宽度与最大宽度之间
@media (min-width:768px) and (max-width:1024px) {
#list li {
width: 50%
;
}
}
//横竖屏，横屏竖屏分别设置宽度
//当可视区宽度大于高度，会认定为横屏，当可视区高度大于宽度会认定为竖屏
@media (orientation:portrait) {
#list li {
width: 50%
;
}
}
@media (orientation:landscape) {
#list li {
width: 25%
;
}
}
媒询的导入方式
根据可视区宽度来判断该引入哪个文件
方式一：通过link标签导入。先加载css再加载html
<link href=
"css/index.xs.css" rel=
"stylesheet" />
<link href=
"css/index.md.css" rel=
"stylesheet" media=
"(min-width:992px)" />
<link href=
"css/index.lg.css" rel=
"stylesheet" media=
"(min-width:1400px)" />
方式二：根据@import导入。先加载html再加载css
@import url("css/index.xs.css");
@import url("css/index.md.css") (min-width: 992px);
@import url("css/index.lg.css") (min-width: 1400px);
从小到大响应式布局
@media (min-width:768px) {
#list {
margin: 0 20px
;
}
}
@media (min-width:992px) {
#list {
margin: 0 auto
;
width: 960px
;
}
}
@media (min-width:1200px) {
#list {
margin: 0 auto
;
width: 1180px
;
}
}
@media (min-width:1600px) {
#list {
margin: 0 auto
;
width: 1580px
;
}
}
