CSS 設定移動端的CSS 響應式布局

2021-08-18 10:51:05 字數 680 閱讀 2924

根本宗旨:寫一次**,跑在一萬種裝置上

核心思想:不就是設定寬度麼?

實現方式:根據不同裝置,設定不同css樣式,設定該裝置支援的頁面寬(高)。

另外,在此之前,我們需要在head裡設定乙個meta標籤,viewport,來設定移動端自適應

viewport詳細資訊,可參考此處:**meta viewport

附上**

html:

響應式布局

根本宗旨:寫一次**,跑在一萬種裝置上

核心思想:不就是設定寬度麼?

實現方式:根據不同裝置,引用不同css樣式,設定支援的寬。

common.css:

body

divp

mobile.css:

body

p

以上兩種css**只是做測試用:在瀏覽器中f12後,改變頁面寬度,來看看效果。寬度分別大於500px:

小於500px:

移動端(響應式)

查詢 mdn stylesheet media max width 800px href example.css 複製 mobile first原則 響應式設計最好mobile first原則優先,不過pc first也可以,只不過現在一半以上的使用者都是用手機在訪問頁面 為實現響應式,可以根據不同...

HTML5 CSS3移動端響應式網頁製作

1.響應式可以簡單理解為 能夠適應所有的裝置螢幕 2.h5相較於xhtml增強了語義化。3.box sizing border box 內減模式 4.固比的布局,固定的模組要用絕對定位的方式將其固定住。5.陰影屬性 box shadow 水平陰影的位置 垂直陰影的位置 模糊羽化 陰影的尺寸 陰影的顏...

css3之移動端rem響應式布局開發

rem root element of fontsize。從而 我們是用根元素 html的font size作為參照,所以頁面會出現等比例的放大縮小。隨螢幕放大而放大,隨螢幕縮小而縮小 function refreshrem refreshrem window.addeventlistener re...