pc端適配移動端

1. 允許網頁寬度自動調整

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

所有主流瀏覽器都支援這個設定，包括ie9。對於那些老式瀏覽器（主要是ie6、7、8），需要使用css3-mediaqueries.js

由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要，可以用width:~%或者

width:auto;

body

h1

small

「流動布局」的含義是，各個區塊的位置都是浮動的，不是固定不變的

.main

.leftbar

float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢位），避免了水平滾動條的出現,另外，絕對定位（position:absolute）的使用，也要非常小心

「自適應網頁設計」的核心，就是css3引入的mediaquery模組

如果螢幕寬度在400畫素到600畫素之間，則載入smallscreen.css檔案

同乙個css檔案中，也可以根據不同的螢幕解析度，選擇應用不同的css規則

// 螢幕寬度小於400畫素

@mediascreenand(max-device-width:400px)
#sidebar
}

的自動縮放img,object老版本的ie不支援max-width，所以只好寫成imgimg

或者，ethanmarcotte的imgsizer.js

addloadevent(function());

less rem移動端適配 PC

宣告 test width 300px 混合 box 混合 可以帶引數 巢狀 less 變數 適配主流裝置 adapterdevicelist 320px,360px,375px,384px,400px,414px,424px,480px,540px,640px,720px,750px 裝置的種類 ...

pc端rem適配 聊聊PC端頁面適配

目前pc並沒有像移動端那樣，可以用rem單位這種一站式解決方案，因為pc需要考慮低階瀏覽器，查詢和background size這些新屬性都不能用。設計稿 1920 1080 190 2.16 自己測1920 945 2.03 14寸普通筆記本 1366 768 190 2.36 參考 參考 登入考...

vue專案移動端 pc端適配方案

vue專案移動端 pc端適配方案 npm i lib flexible s npm i postcss px2rem s簡要介紹這兩個包的用途 flexible會為頁面根據螢幕自動新增標籤，動態控制initial scale，maximum scale，minimum scale等屬性的值。post...