媒體查詢@media
- 常見的設(shè)備類型和寬度
超小屏幕 手機 (<768px)
小屏幕 平板 (≥768px)
中等屏幕 桌面顯示器 (≥992px)
大屏幕 大桌面顯示器 (≥1200px)
- 如何讓網(wǎng)頁兼容所有設(shè)備?
使用媒體查詢做斷點,根據(jù)不同的分辨率做不同的頁面css的設(shè)置.
- 如何使用?
@media 媒體類型 and (屬性設(shè)置) { //定義樣式 }
3-1. 媒體類型
all用于所有設(shè)備
screen用于電腦屏幕与斤，平板電腦，智能手機等。
speech應用于屏幕閱讀器等發(fā)聲設(shè)備
3-2. 媒體功能
max-width最大寬度
min-width最小寬度
對手機設(shè)備的斷點設(shè)置
@media screen and (max-width: 414px) {
#outerBox{
width: 100%;
margin: 0;
}
#box{
width: 66%;
}
#box2{
margin-left: 1%;
width: 33%;
}
}
為打印機做一個樣式
@media print {
#outerBox{
font-size: 50px;
}
}
了解更多：
https://www.w3cschool.cn/cssref/css3-pr-mediaquery.html
- 總結(jié)： 媒體查詢的核心思路秽晚，就是根據(jù)不同的設(shè)備寬度設(shè)置斷點攒庵，然后書寫css樣式覆蓋之前的樣式九府。
