<meta name=&#34;viewport&#34; content=&#34;width=device-width, initia" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > CSS響應式布局

CSS響應式布局

時間：2023-09-02 23:30:01 | 來源：網(wǎng)站運營

時間：2023-09-02 23:30:01 來源：網(wǎng)站運營

CSS響應式布局：

設置meta標簽中 name="viewport"

設置視圖標簽(viewport)來告訴瀏覽器，使用設備的寬度作為視圖寬度并禁止初始的縮放。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Media Queries 媒體查詢

代碼

/* 隨著屏幕寬度增大或減小的時候，后面的樣式會覆蓋前面的樣式 *//* 移動端優(yōu)先使用min-width *//* iphone6 7 8 plus */@media screen and (min-width: 414px) { body { background-color: blue; }}/* ipad */@media screen and (min-width: 768px) { body { background-color: green; }}/* PC端優(yōu)先使用max-width *//* pc width > 1024px */ body { background-color: yellow; }/* ipad pro */@media screen and (max-width: 1024px) { body { background-color: #FF00FF; }}百分比布局


缺點
各屬性使用百分比，相對父元素的屬性并不是唯一的。導致百分比布局很復雜。
rem布局
em 和 rem 是什么


rem 布局的要點


  1. 根元素的 font-size 提供了一個基準，其他元素以 rem 為固定單位定義大小。
  2. 需要根據(jù)視圖容器的大小，動態(tài)的改變根元素 font-size，其他元素也會發(fā)生響應式的變化。
  3. 在CSS樣式之前要寫一段JS代碼，動態(tài)控制根元素 font-size 的大小。
代碼
添加resize事件監(jiān)聽，回調(diào)函數(shù)可以改變rem的大小

function refreshRem() { var docEl = doc.documentElement; var width = docEl.getBoundingClientRect().width; var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem;}win.addEventListener('resize', refreshRem);利用媒體查詢，以rem為單位設置不同尺寸設備下的字體大小

/* ipad pro */@media screen and (max-width: 1024px) { body { background-color: #FF00FF; font-size: 1.4rem; }}視口單位

使用 vw 作為 CSS 單位

圖片響應式

使用 max-width

img { display: inline-block; // 元素相對于周圍內(nèi)容以內(nèi)聯(lián)形式呈現(xiàn)，但可以設置寬度和高度 max-width: 100%; height: auto; // 保證圖片進行等比縮放而不至于失真}max-width 保證圖片最大寬度為其容器的100%。如果圖片寬度超過了其容器，圖片會縮放，占滿最大可用空間。

不能用 width: 100% 。這條規(guī)則會導致他顯示的跟容器始終一樣寬。在容器比圖片寬的多的情況下，圖片被無限拉伸。


使用 background-image

.banner{ background-image: url(/static/large.jpg);}@media screen and (max-width: 767px){ background-image: url(/static/small.jpg);}

成型方案

作者：前端蔡徐坤
鏈接：https://juejin.im/post/6870809105095720973
來源：掘金

關(guān)鍵詞：布局,響應

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉