溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“CSS如何實現屏幕大小自適應”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“CSS如何實現屏幕大小自適應”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。
要想實現css屏幕大小自適應，首先得引入 CSS3 @media 媒體查詢器：
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的頭文件<head>里上加入以下代碼：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
解釋：
width = device-width：寬度等于當前設備的寬度
initial-scale：初始的縮放比例（默認設置為1.0）
minimum-scale：允許用戶縮放到的最小比例（默認設置為1.0）
maximum-scale：允許用戶縮放到的最大比例（默認設置為1.0）
user-scalable：用戶是否可以手動縮放（默認設置為no，因為我們不希望用戶放大縮小頁面）
因為media的類型很多，這里就發菜鳥教程的對應鏈接了：http://www.neiyidaogou.com/css/103906.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) { ... }以上是“CSS如何實現屏幕大小自適應”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
