image.png
不同终端,不同大小的屏幕,
需要有不同的布局.
响应式布局的需求就是,我写一个布局,
根据不同设备自动调整自己的布局.
image.png
image.png
image.png
image.png
根据不同终端,:root{font-size} 设置不同大小,
保证device/rootFontSize 的值一样.
css设定各种尺寸时,单位全用 rem
我们只要保证每个终端的 1rem的大小都一样,
那么整个文档使用rem的尺寸表现将会一致.
image.png
image.png
image.png
image.png
第一种
根据设备类型不同(一般都是screen) 根据尺寸不同,引入不同 外联样式.
image.png
第二种 @media
@media screen and (max-width:800px) and (min-width:500px) {
.item{
background-color: #F08080;
}
}
@media screen and (max-width:500px) and (min-width:400px) {
.item{
background-color: #FF00FF;
}
}
@media screen and (max-width:400px) and (min-width:300px) {
.item{
background-color: #F0AD4E;
}
}
@media screen and (max-width:300px) and (min-width:100px) {
.item{
background-color: #F2DEDE;
}
}
第三种 @import 也是引入外部文件
不兼容ie6,ie7?
@import url("index.css") screen and (max-width:700px);
image.png
image.png
not必须放在最前面,呵呵..
@media not screen and (max-width:700px) {
.item{
background-color: #F23D6A;
}
}
就变成了, 小于 700px 的情况背景颜色为 #F23D6A;
image.png
onlys基本不用了?
image.png
image.png
image.png
image.png
image.png
image.png
image.png
