css3笔记7-响应式布局,和分辨率的一些东西

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