CSS 頁面自適應

時間 2019-12-05

標籤 css 頁面自適應欄目 CSS 简体版

原文原文鏈接

1、在<head></head>中添加

　　以上是設置網頁寬度默認等於屏幕寬度，初始縮放倍率是1.0，最大、最小縮放倍率也爲1.0，不容許用戶使用手勢縮放

　　根據須要可添加如下：

　　<meta charset="UTF-8">　　（設置頁面編碼）　　

　　<meta http-equiv="pragma" content="no-cache" /> 　　（不容許從緩存讀取，脫機後沒法訪問）

2、引入css

　　方法一：根據不一樣屏幕寬度加載不一樣css

　　意思是：屏幕寬度最大爲640px的話，加載small.css

　　意思是：屏幕寬度在640~960px之間的話，加載middle.css

　　方法二：在同一個css中添加@media判斷

　　Less中寫法爲：

　　　　　　font-size:16px;

　　　　　　@media screen and(max-device-width: 640px) {

　　　　　　　　font-size:14px;

　　　　　　}

　　css中寫法爲：

　　　　　　font-size:16px;

　　　　}

　　　　@media screen and (max-device-width: 640px){

　　　　　　　　padding-top:45px;

　　　　　　}

　　注意：

　　一、不使用絕對寬度：width:xxx px;，能夠使用em或%代替，字體也同樣

　　二、適當使用絕對佈局absolute，可是不濫用

　　三、建議使用流動佈局float

　　（更多詳細內容，可參考 http://lusongsong.com/info/post/158.html）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。