移動端(響應式)

2021-09-11 11:45:08 字數 619 閱讀 1065

**查詢 mdn

"stylesheet" media="(max-width: 800px)"

href="example.css" />複製**

mobile-first原則

響應式設計最好mobile-first原則優先,不過pc-first也可以,只不過現在一半以上的使用者都是用手機在訪問頁面

為實現響應式,可以根據不同的useragent 來顯示不同的兩套**,這些都是由後端來實現的

然而目前最流行的做法是:如果是pc訪問的話 就跳轉到pc的鏈結下(一般是如果是手機訪問的話就跳轉到手機的鏈結下(

也就是說不同的裝置跳不同的站點

meta

"view-port" content="width=device-width,

user-scalable=no, initial-scale=1.0, maximum-scale=1.0,

minimum-scale=1.0" />

複製**

在移動端頁面,要加上以上**,是為了

防止手機頁面模擬980畫素寬度

防止頁面在使用者雙擊的時候放大

防止使用者兩指縮放頁面

移動端響應式布局

1.快捷鍵 meta vp tab鍵 2.viewport視口 width device width 設定視口的寬度等於裝置的寬度,如果不設定的話,缺省視口寬度為980px。通俗的理解 我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面,換句話說,就是展示當前這個頁面的區域一共有多寬 瀏覽器...

移動端與響應式

lang en charset utf 8 name viewport content width device width,initial scale 1.0,minimum scale 1.0,maximum scale 1.0,user scalable no documenttitle he...

移動端 響應式 less

2.less 3.flexible 4.響應式 3.1 rem em 相對於父級 rem 相對於html元素的字型大小,如 html 字型大小 16px,則1rem 16px 優點 通過html字型大小控制頁面布局 查詢 螢幕寬度 800時,字型大小100px media screen and ma...