vw sass less 實現前端自適應布局

2021-09-13 18:28:40 字數 839 閱讀 7214

vw+sass/less 實現前端自適應布局

vw是css的乙個屬性,和px,rem等類似,屬於長度單位。

在瀏覽器中, 1 vw = viewport 的寬度 /100

根據這個特性,vw 可以幫助我們實現移動端自適應布局,其優點在於所見即所得,甚至優於rem,因為完全不用使用額外的計算。

推薦和sass、less這種css預處理語言一起使用,因為其可以定義變數及函式,會在使用vw上提供巨大幫助。

@vv: 7.5vw

header.clear

.circle

下面三張圖分別是在iphone 6|7|8 和ihone 6p|7p|8p 以及ipad pro中的表現

以設計稿為750為例,假設viewport代表視窗寬度

750 => viewport

7.5 => viewport/100

//得到

1vw => 7.5

// 元素list 寬為300px

300 => 300/7.5 vw

//得到

@vv = 7.5vw

300 => 300/@vv

前端知識自問自答

1.什麼是rfcs 並非所有的rfc文件都是網際網路標準,只有很少的rfc文件最後變成了網際網路標準。2.vue的雙向繫結的原理是什麼?vue.js是採用資料劫持結合發布者 訂閱者模式的方式,通過es5提供的object.defineproperty 方法來劫持 監視洛個屬性的setter,gett...

Oracle 實現自增列

sql server中實現自增列只需要將字段定義為identity 1,1 而在oracle中自增列需要使用乙個序列 sequence 和觸發器來實現。1.建立sequence,首先需要有create sequence或者create any sequence許可權 1 create sequenc...

oracle實現自增

oracle實現自增id 建立一張t studentinfo表 create table t studentinfo id integer notnull primary key,xsname nvarchar2 120 not null,xsage integer notnull,mobile v...