使用CSS適配多平臺開發(fā)

很多網(wǎng)站不能只在電腦端或手機端使用,但這就意味著要有兩套布局,因為移動端的屏幕小,它的布局要和電腦端的不一樣,可是再重新寫一遍似乎又太麻煩,所以使用同一個頁面根據(jù)屏幕大小改變布局就非常重要了.
這里根據(jù)寬度進行辨別是大屏設備還是小屏設備.
使用的方法很簡單,就是用@media:

/*這里的定義是對其他設備*/
@media screen and (max-width:500px){
    /*里面的定義對寬度是500像素以下的設備,如*/
    body{
        width:100%;
    }
}

額外提示:

除了max-width,還可以使用min-width,也就是對大于min-width的設備生效.
有時下面的屬性不生效,可以加上!important

以上是這篇文章的全部,錯誤的地方懇請指正.
QQ:8955859,希望能和大家一起學習.
最后,都看到這了,贊賞一下唄!(^ ~ ^||).

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,437評論 0 11
  • 問題的由來 手機屏幕的分辨率差異很大。 iphone4:320×480 iphone6:375×667 H5 網(wǎng)頁...
    尚山夏香閱讀 2,592評論 0 1
  • 一、使用真實手機測試未發(fā)布網(wǎng)頁的方法 方法① 在虛擬機中搭建xampp,將文件通過FTP傳到虛擬機,在一個局域網(wǎng)中...
    fastwe閱讀 805評論 0 0
  • media type -- 媒體類型 media type是css2中的一個非常有用的屬性,通過media typ...
    D_R_M閱讀 1,193評論 0 0
  • 了解真實的『REM』手機屏幕適配rem 作為一個低調(diào)的長度單位,由于手機端網(wǎng)頁的興起,在屏幕適配中得到重用。 使用...
    張憲宇閱讀 2,323評論 0 5

友情鏈接更多精彩內(nèi)容