摘要:適配方案簡單解析相對于根元素的的大小來計(jì)算坐作為一個(gè)單位是根據(jù)手淘團(tuán)隊(duì),比較,改寫的一個(gè)插件,兼容豎屏轉(zhuǎn)橫屏出現(xiàn)的,自定義視覺設(shè)計(jì)稿的寬度,設(shè)定最大寬度這里有的地址,下載下來用即可第一個(gè)參數(shù)是視覺設(shè)計(jì)稿的寬度,一般視覺設(shè)計(jì)稿有,可
rem + simple-flexible 適配方案 簡單解析
rem 相對于根元素 的 font-size 的大小來計(jì)算坐作為一個(gè)單位;
simple-flexible 是根據(jù)手淘團(tuán)隊(duì) lib-flexible.js,比較,改寫的一個(gè)插件,兼容 UC 豎屏轉(zhuǎn)橫屏出現(xiàn)的 BUG,自定義視覺設(shè)計(jì)稿的寬度:designWidth,設(shè)定最大寬度:maxWidth
這里有 simple-flexible 的 Github 地址,下載下來用即可;
第一個(gè)參數(shù)是視覺設(shè)計(jì)稿的寬度,一般視覺設(shè)計(jì)稿有 750px,可以根據(jù)實(shí)際調(diào)整
第二個(gè)參數(shù)則是設(shè)置制作稿的最大寬度,超過 750px,則以 750px 為最大限制;
使用時(shí)候的換算比例,是 1:100, 即 1rem = 100px;
使用步驟復(fù)制 simple-flexible 的 flexible.min.js 或 flexible.js 代碼到頁面的 的 標(biāo)簽里面;
然后視覺設(shè)計(jì)稿大小,調(diào)整里面的最后兩個(gè)參數(shù)值;
根據(jù)設(shè)計(jì)像素,使用 rem 單位轉(zhuǎn)換的視覺設(shè)計(jì)稿里面的 px 單位,例: 750px = 7.5rem;
優(yōu)劣簡單實(shí)用,基本上沒有什么劣勢,在 IIS上也已經(jīng)對最新的 IPheonX 做出了適配方案,建議使用
rem + lib-flexible 適配方案 簡單解析lib-flexible.js 是手淘團(tuán)隊(duì)制作的一個(gè) Js 插件,實(shí)際上就是能過 JS 來動態(tài)改寫 標(biāo)簽;
lib-flexible.js 基本原理是模擬 vw 把視覺稿分為 100份,以單位 a 來說,1rem = 10a;
以視覺稿 750px 為例子
1a = 7.5px, 1rem = 75px使用步驟
可以根據(jù)上面的步驟,外部引入 CDN 也可以
也可以使用模塊化方式
Npm:
npm i -S amfe-flexible
JS:
import "amfe-flexible" /* do something */優(yōu)劣
在 UC 瀏覽器上發(fā)現(xiàn)了,橫批豎屏轉(zhuǎn)換不過來的情況,已經(jīng)找到兼容方案,是通過js在頁面的 里生成定義了 元素 font-size 的 style 元素來解決!
而且官方也說明這個(gè)是 vw 的過度方案,不建議長期使用;
PostCSS + VW 適配方案 簡單解析PostCSS 將 CSS 變成 JavaScript 的數(shù)據(jù),使它變成可操作;
VW 是基于 Viewpost 視窗的長度單位;
Viewpost 是指瀏覽器可視化的區(qū)域,而可視化區(qū)域即是 window.innerWidth/window.innerHeight 的大小;
與 Viewpost 相關(guān)的單位有以下四個(gè)
vw : 是 Viewport width 的簡寫 1vw = window.innerWidth的 1%;
vh : 是 Viewport height 的簡寫 1vw = window.innerHeight 1%;
vmin : vw 和 vh 之間的較小值
vmax : vw 和 vh 之間的較大值
使用步驟假設(shè)視覺設(shè)計(jì)稿的寬度是 750px 即 1vw = 7.5px,那么就得根據(jù)設(shè)計(jì)圖的 px 值來轉(zhuǎn)換 vw單位,為了避免這樣的計(jì)算,當(dāng)然就需要使用到 PostCSS ,以及 postcss-px-to-viewport 一個(gè) PostCSS 的插件
本方案使用打包工具構(gòu)建項(xiàng)目的時(shí)候使用是最酸爽的,建議在以下環(huán)境下嘗試;
parceljs
webpack
有過使用前端腳手架的童鞋,應(yīng)該都有看到過項(xiàng)目根目錄下面都會有一個(gè) .postcssrc 文件,它里面都是一些配置選項(xiàng)比較著名的 autoprefixer,cssnano,px2rem,cssnext...等等好玩的配置插件,但是這里不作這些說明,只介紹 postcss-px-to-viewport 配合 vw 使用
Npm:
npm i -S postcss-px-to-viewport
打開 .postcssrc,假定視覺設(shè)計(jì)稿的寬度為 750px 改寫配置如下:
//... "plugins": { "postcss-px-to-viewport": true }, "rule": { "postcss-px-to-viewport": { "viewportWidth": 750, "viewportHeight": 1334, "unitPrecision": 5, "viewportUnit": "vw", "selectorBlackList": [], "minPixelValue": 1, "mediaQuery": false } } //...
配置完成之后,在項(xiàng)目中直接使用 px ,構(gòu)建的時(shí)候就會自動轉(zhuǎn)換為 vw 單位了,簡直不要太爽了;
postcss-px-to-viewport 配置項(xiàng)說明
"viewportWidth" //設(shè)置視覺設(shè)計(jì)稿的寬度 "viewportHeight" //設(shè)置視覺設(shè)計(jì)稿的高度 "unitPrecision": //單位的精度,即保留多少位小數(shù) "viewportUnit": //轉(zhuǎn)換的單位 "selectorBlackList": //需要忽略的選擇器 "minPixelValue": //最小像素值 "mediaQuery": //是否允許媒體查詢轉(zhuǎn)換為 px優(yōu)劣
vw 的兼容性貌似還沒那么好,有可能需要做降級處理,需要使用到 CSS Houdini 和 CSS Polyfill 上一些針對 vw 單位做一個(gè)降級處理;
vw 在混合使用到 margin 的 px 時(shí)候 有可能超出 100vw ,目前使用 padding 來代替 marging 再配置上 box-sizing 可以解決,亦可以使用 css 的 calc() 函數(shù)來做一個(gè)計(jì)算;
轉(zhuǎn)換的時(shí)候多少還存在一點(diǎn)像素差,無法完全還原;
附加 rem 也不需要計(jì)算的裝置在 sublime 上面,有一個(gè)插件 cssrem 可以讓放手寫 px 然后 sublime 自動轉(zhuǎn)換成 rem ,簡直可能愛上了 css,
配置說明如下:
px_to_rem // px轉(zhuǎn)rem的單位比例,默認(rèn)為40,基本定義是視覺設(shè)計(jì)稿的寬度/10; max_rem_fraction_length // px轉(zhuǎn)rem的小數(shù)部分的最大長度,默認(rèn)為6; available_file_types // 啟用此插件的文件類型。默認(rèn)為:[".css", ".less", ".sass"];總結(jié)
這里總結(jié)的三種適配方案本人都有在用,如果說用得最多的應(yīng)該是第一種了,因?yàn)榘l(fā)現(xiàn)的時(shí)間比較早,所以用的自然也比較多了;
當(dāng)然,還有很多本人未知的方案,但是所有的適配方案都是為了完美的還原視覺設(shè)計(jì)稿,完美解決兼容性問題,當(dāng)然這都是理想狀態(tài);
感謝 @白白 的幫忙(名詞解析) + 鼓勵(lì)(催稿)
感謝 @w3cplus,@前端開發(fā)博客,
感謝兩位的四篇文章,給我?guī)淼膯l(fā)
再聊移動端頁面的適配
使用Flexible實(shí)現(xiàn)手淘H5頁面的終端適配
rem自適應(yīng)布局
rem自適應(yīng)js
原文鏈接 愈發(fā)熟練的CSS 技巧
原文博客 時(shí)之物語 歡迎來玩哦~
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/95330.html
摘要:適配方案簡單解析相對于根元素的的大小來計(jì)算坐作為一個(gè)單位是根據(jù)手淘團(tuán)隊(duì),比較,改寫的一個(gè)插件,兼容豎屏轉(zhuǎn)橫屏出現(xiàn)的,自定義視覺設(shè)計(jì)稿的寬度,設(shè)定最大寬度這里有的地址,下載下來用即可第一個(gè)參數(shù)是視覺設(shè)計(jì)稿的寬度,一般視覺設(shè)計(jì)稿有,可 showImg(https://segmentfault.com/img/bVbbjpG?w=1366&h=660); rem + simple-flexi...
摘要:學(xué)編程真的不是一件容易的事不管你多喜歡或是多會編程,在學(xué)習(xí)和解決問題上總會碰到障礙。熟練掌握核心內(nèi)容,特別是和多線程初步具備面向?qū)ο笤O(shè)計(jì)和編程的能力掌握基本的優(yōu)化策略。 學(xué)Java編程真的不是一件容易的事,不管你多喜歡或是多會Java編程,在學(xué)習(xí)和解決問題上總會碰到障礙。工作的時(shí)間越久就越能明白這個(gè)道理。不過這倒是一個(gè)讓人進(jìn)步的機(jī)會,因?yàn)槟阋恢辈粩嗟膶W(xué)習(xí)才能很好的解決你面前的難題...
摘要:輸入的時(shí)候少按一個(gè)鍵瀏覽器兼容問題比如使用的選擇器命名,在是無效的能良好區(qū)分變量命名變量命名是用不要純數(shù)字中文等命名,盡量使用英文字母來表示。選擇器和類選擇器最大的不同在于使用次數(shù)上。當(dāng)需要設(shè)置英文字體時(shí),英文字體名必須位于中文字體名之前。 回顧上一節(jié)HTML 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...
閱讀 2189·2020-06-12 14:26
閱讀 2492·2019-08-29 16:41
閱讀 1890·2019-08-29 15:28
閱讀 2460·2019-08-26 13:43
閱讀 759·2019-08-26 13:37
閱讀 2781·2019-08-23 18:13
閱讀 2805·2019-08-23 15:31
閱讀 1022·2019-08-23 14:10