css如何自適應屏幕大小？下面本篇文章給大家介紹一下使用CSS實現屏幕大小自適應的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

css如何自適應屏幕大小？

要想實現css屏幕大小自適應，首先得引入 CSS3 @media 媒體查詢器。只需在CSS中添加@media screen屬性，針對不同設備的寬度進行編寫CCS樣式，根據瀏覽器寬度判斷判斷樣式文件并輸出不同的寬度值。

media的使用和規則：被鏈接文檔將顯示在什么設備上。

用于為不同的媒介類型規定不同的樣式。

語法：@media 設備名 only (選取條件) not (選取條件) and(設備選取條件)，設備二{sRules}

實例：/* 這是匹配橫屏的狀態，橫屏時的css代碼 */

@media all and (orientation :landscape){}

/* 這是匹配豎屏的狀態，豎屏時的css代碼 */

@media all and (orientation :portrait){}

@media X and (min-width:200px){}

/*X為媒體類型--->比如print/screen/TV等等*/

/* 寬度大于600px小于960之間時，隱藏footer結構 */

@media all and (min-height:640px) and (max-height:960px){

footer{display:none;}

}

在實際應用的時候，首先得在HTML的頭文件

里上加入以下代碼：

解釋：width = device-width：寬度等于當前設備的寬度

initial-scale：初始的縮放比例(默認設置為1.0)

minimum-scale：允許用戶縮放到的最小比例(默認設置為1.0)

maximum-scale：允許用戶縮放到的最大比例(默認設置為1.0)

user-scalable：用戶是否可以手動縮放(默認設置為no，因為我們不希望用戶放大縮小頁面)

因為media的類型很多，這里就發菜鳥教程的對應鏈接了：

http://www.runoob.com/cssref/css3-pr-mediaquery.html

下面是media類型的screen(用于電腦屏幕，平板電腦，智能手機等)：

css自適應屏幕大小大方法：@media screen and (min-width: 320px) and (max-width: 1156px){

.site-bg-dl {

position: fixed;

height: 100%;

width: 100%;

z-index: 0;

background-image: url(bjxzfwzx/images/bj1.png);

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

background-size:100% 100%;

-moz-background-size:100% 100%;

}

}

解釋：

告訴瀏覽器當屏幕大于320px，并小于1156px下執行此代碼；

在css中添加如下內容 可以分別定制不同屏幕的顯示樣式：/* 大屏幕 ：大于等于1200px*/

@media (min-width: 1200px) { ... }

/*默認*/

@media (min-width: 980px){...}

/* 平板電腦和小屏電腦之間的分辨率 */

@media (min-width: 768px) and (max-width: 979px) { ... }

/* 橫向放置的手機和豎向放置的平板之間的分辨率 */

@media (max-width: 767px) { ... }

/* 橫向放置的手機及分辨率更小的設備 */

@media (max-width: 480px) { ... }

更多前端開發知識，請查閱 HTML中文網 ！！

總結

以上是生活随笔為你收集整理的html自动适应屏幕分辨率,css如何自适应屏幕大小？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。