利用視口單位實現適配布局
響應式布局的實現依靠**查詢( media queries )來實現，選取主流裝置寬度尺寸作為斷點針對性寫額外的樣式進行適配，但這樣做會比較麻煩，只能在選取的幾個主流裝置尺寸下呈現完美適配。即使使用rem方式來布局，也需要寫一段js**來動態改變根元素的大小。比較成熟的做法如手淘的做法。使用flexible實現手淘h5頁面的終端適配
現在我們介紹一種全新的適配方式即：利用視口單位來實現適配這樣就不用引入多餘的js**
根據css3規範，視口單位主要包括以下4個：
vw : 1vw 等於視口寬度的1%
vh : 1vh 等於視口高度的1%
vmin : 選取 vw 和 vh 中最小的那個
vmax : 選取 vw 和 vh 中最大的那個
做法一：只使用vw做css單位
使用vw作為css單位就涉及到設計師的設計稿如何轉化未vw的問題。
使用sass做為函式編譯
//以iphone6的設計稿舉例
$base_vw = 375;
@function vw ($px) {
return ($px/$base_vw) * 100vw
複製**使用
width: 100%;
.container {
padding: vw(20) vw(20) vw(20) vw(20)
.main {
width 100%
>h1 {
font-size 14px
複製**高清屏乙個畫素解決
.border-1px-bottom {
position: relative;
&::after {
content: '';
position: absolute;
z-index: 1;
background-color: #f8f8f8;
height: 1px;
left: 0;
right: 0;
top: 0;
pointer-events: none;
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
-webkit-transform: scaley(0.5);
-webkit-transform-origin: 50% 0%;
複製**對於banner要實現高寬比的圖需要使用padding-top
.banner {
position: relative;
padding-top: percentage(100/750); // 使用padding-top
height: 0;
overflow: hidden;
img {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
複製**
做法二：使用vw+rem做css單位
雖然vw能更優雅的適配，但是還是有點小問題，就是寬，高沒法限制。那麼結合rem就可以完美解決啦。
// 設定html根元素的大小 750px->75 640px->64
// 將螢幕分成10份，每份作為根元素的大小。
$vw_fontsize: 75
@function rem($px) {
// 例如：乙個div的寬度為100px，那麼它對應的rem單位就是(100/根元素的大小)* 1rem
@return ($px / $vw_fontsize) * 1rem;
$base_design: 750
html {
// rem與vw相關聯
font-size: ($vw_fontsize / ($base_design / 2)) * 100vw;
// 同時，通過media queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
@media screen and (min-width: 540px) {
font-size: 108px;
// body 也增加最大最小寬度限制，避免預設100%寬度的 block 元素跟隨 body 而過大過小
body {
max-width: 540px;
min-width: 320px;
複製**
使用width: 100%;
.container {
padding: rem(20) rem(20) rem(20) rem(20)
.main {
width 100%
>h1 {
font-size 14px
複製**
參考凹凸實驗室
vw 前端 前端適配 vw rem自適應適配方案
先說好處 無需借助js，只用css就可以實現一定屏寬範圍內元素大小隨螢幕寬度改變平穩變化。再說用法 第一步 元素大小單位選用rem。第二步 根據設計稿的螢幕寬度設定html的font size大小，且單位用vw。第三步 通過media query設定html根font size的最大最小px值。以上...
CSS3的vw和vh視口單位
認識視口單位 viewport units 首先，我們要了解什麼是視口。在業界，極為推崇的一種理論是 peter paul koch 江湖人稱 ppk大神 提出的關於視口的 解釋 在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域 而在移動端較為複雜，它涉及到三個視口 分別是 layout vie...
vw適配中使用偽類選擇器遇到的問題
在使用vue init webpack構建的專案中，一開始我準備使用rem布局，以前使用rem布局，都採用的是amfe團隊發布的lib flexible，但是在flexible的redeme的一開始 我就讀到了這麼一段話，官方指引我使用vw實現適配 依據引導，我啟用了postcss外掛程式，並且學習...