image.png
不同終端,不同大小的屏幕,
需要有不同的布局.
響應(yīng)式布局的需求就是,我寫一個(gè)布局,
根據(jù)不同設(shè)備自動(dòng)調(diào)整自己的布局.
image.png
image.png
image.png
image.png
根據(jù)不同終端,:root{font-size} 設(shè)置不同大小,
保證device/rootFontSize 的值一樣.
css設(shè)定各種尺寸時(shí),單位全用 rem
我們只要保證每個(gè)終端的 1rem的大小都一樣,
那么整個(gè)文檔使用rem的尺寸表現(xiàn)將會(huì)一致.
image.png
image.png
image.png
image.png
第一種
根據(jù)設(shè)備類型不同(一般都是screen) 根據(jù)尺寸不同,引入不同 外聯(lián)樣式.
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
