如何新增css讓頁面自適應手機螢幕

時間 2021-09-10 01:48:31

1樓:匿名使用者

首先,在網頁**的頭部,加入一行viewport標籤。

viewport是網頁預設的寬度和高度,上面這行**的意思是,網頁寬度預設等於螢幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小佔螢幕面積的100%。即讓viewport的寬度等於物理裝置上的真實解析度,不允許使用者縮放。

其次:網頁寬度css一定要使用百分比width: xx%;,不能用絕對畫素。當然可以width:auto;

第三,流動佈局.left

第四,選擇載入css這是自適應的關鍵部分.abc @media screen and (min-width: 1201px) }/* 設定了瀏覽器寬度不小於1201px時 abc 顯示1200px寬度 */@media screen and (max-width:

1200px)  }

設定了瀏覽器寬度不大於1200px時 abc 顯示900px寬度 */@media screen and (max-width: 901px)  } /* 設定了瀏覽器寬度不大於901px時 abc 顯示200px寬度 */@media screen and (max-width: 500px)  }

設定了瀏覽器寬度不大於500px時 abc 顯示100px寬度 */ 需要注意是css**順序,由大到小排版css(判斷瀏覽器寬度越大越放前),這樣是因為邏輯關係,@media 判斷css排錯將導致判斷失效。

2樓:崗褘賀

無論是電腦還是手機,要做到自適應螢幕,其實都是一樣的。

首先,在網頁**的頭部,加入一行viewport標籤

viewport是網頁預設的寬度和高度,上面這行**的意思是,網頁寬度預設等於螢幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小佔螢幕面積的100%。即讓viewport的寬度等於物理裝置上的真實解析度,不允許使用者縮放。

其次:網頁寬度css一定要使用百分比width: xx%;,不能用絕對畫素。當然可以用width:auto;

第三,流動佈局

.left

第四,選擇載入css

這是自適應的關鍵部分

.abc

@media screen and (min-width: 1201px)

} /* 設定了瀏覽器寬度不小於1201px時 abc 顯示1200px寬度 */

@media screen and (max-width: 1200px)

} /* 設定了瀏覽器寬度不大於1200px時 abc 顯示900px寬度 */

@media screen and (max-width: 901px)

} /* 設定了瀏覽器寬度不大於901px時 abc 顯示200px寬度 */

@media screen and (max-width: 500px)

} /* 設定了瀏覽器寬度不大於500px時 abc 顯示100px寬度 */

需要注意是css**順序,由大到小排版css(判斷瀏覽器寬度越大越放前),這樣是因為邏輯關係,@media 判斷css排錯將導致判斷失效。

第四,**自適應

img老版本的ie不支援max-width,所以只好寫成:img

篳五、採用相對字型大小

字型也不能使用絕對大小(px),而只能使用相對大小(em)。

這裡最重要的,是第三條和第四條,也就是採用流動佈局和css選擇載入。祝你好運!

css中哪個屬效能讓手機頁面自適應螢幕

3樓:匿名使用者

寬度用百分比作為值就可以讓內容大小隨視窗大小改變,,但是隻是這樣做是不夠的。

要實現響應式佈局,還需要了解一下css3的**查詢,,你可以搜一下這個,,智慧手機的瀏覽器對它支援的很好。

4樓:hy黃小小

在網頁**的頭部,加入一行viewport元標籤。

viewport是網頁預設的寬度和高度,上面這行**的意思是,網頁寬度預設等於螢幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小佔螢幕面積的100%。

對於viewport屬性,我是真正在接觸移動web開發是才遇到的,一把的ps佈局都是固定的960px,1000px這種。

5樓:匿名使用者

不太懂css,你可以試試twitter bootstrap這個框架,可以實現自適應螢幕。

6樓:套套環

哪個屬性也不能自適應手機頁面

Css中ul可以加滾動條嗎,CSS 如何新增水平滾動條

嘉文四世丶威威 可以的,具體的方法如下 1 第一種方法,如圖。高度必須要有,overflow屬性為auto。如果要出現水平滾動條,overflow x auto,如果出現垂直滾動條為,overflow y auto 2 然後檢視結果,如圖所示。3 第二種方法,如圖。也需要設定寬高。4 檢視結果,如圖...

css如何實現讓文字透明,CSS如何單獨控制字型透明

夜思寧煙 方法是可以實現是,就是在連結a中的abc前後加一個span標籤就可以了。下面是完整的 隱藏的文字在左上角,滑鼠放上去看看 ps seo中通過這樣的方法google會判斷你是作弊的,所以最好不要用這種方法,如果你只是想在一個背景 上面做連結,可以做一個1x1畫素的gif透明 然後給寫成 其中...

html頁面滾動條樣式如何修改通過css 還是

webkit scrollbar 這樣試試 html js 或者css怎麼做到隱藏滾動條,但是依舊可以滾動? 以前這個問題我也想了一陣子,但是又不想用外掛什麼的。給你個思路。一個外部div裡設定寬高設定overflow hidden,然後裡面插入一個div 設定 寬度width 102 height...