css pc和mobile,初识pc端和mobile端CSS适配利器—vw+rem+CSS locks
前言
大概五月份的時(shí)候，我下定決心寫(xiě)自己的博客系統(tǒng)，于是斷斷續(xù)續(xù)花了近一個(gè)月的時(shí)間琢磨Nestjs，寫(xiě)完了接口部分。六月份因?yàn)楣ぷ鞯脑蚓蛿R置了，說(shuō)來(lái)也慚愧，直到九月中旬，才將它拾起。半個(gè)月后，后臺(tái)部分基本功能完成，開(kāi)始著手寫(xiě)網(wǎng)站。
一股腦兒又寫(xiě)了半個(gè)月，基礎(chǔ)功能，自動(dòng)化部署都順利完成，自我感覺(jué)很棒。然而，當(dāng)我使用手機(jī)瀏覽網(wǎng)站時(shí)，總是出現(xiàn)一些不該出現(xiàn)的布局問(wèn)題。于是我寫(xiě)了一堆媒體查詢代碼，想要快速解決這個(gè)bug，卻陷入了無(wú)盡的調(diào)試環(huán)節(jié)，這讓我感到無(wú)比煩躁。這時(shí)我才意識(shí)到，要想同時(shí)兼容pc端和mobile端，遠(yuǎn)比我想象的要難。
我嘗試著從網(wǎng)上尋求解決方案，經(jīng)過(guò)一通搜索，查證，實(shí)踐，并沒(méi)有找到自己特別鐘意的方案。在這中間，有一篇文章里寫(xiě)道：“兼容pc端和mobile端只有兩種辦法，一是寫(xiě)兩套CSS，二是拆成兩個(gè)項(xiàng)目獨(dú)立維護(hù)”。分為兩個(gè)獨(dú)立項(xiàng)目在前期推進(jìn)是比較緩慢，但是對(duì)后續(xù)維護(hù)比較友好，對(duì)此我深信不疑，深思熟慮之后，我決定采用第二種辦法。
工作之余又寫(xiě)了幾天，越發(fā)覺(jué)得哪不對(duì)勁，仿佛做了無(wú)用功。因?yàn)檫@個(gè)博客系統(tǒng)本身相對(duì)單一，功能并不多，如果要分為兩個(gè)子項(xiàng)目，將會(huì)產(chǎn)生許多冗余代碼，于是我索性關(guān)掉vs-code，重新整理思緒。功夫不負(fù)有心人，經(jīng)過(guò)漫長(zhǎng)地挖掘，總算是找到了較為理想的解決方案。
工欲善其事必先利其器。
基本原理
首先有三個(gè)概念必須掌握。
vw：視口單位，通常來(lái)說(shuō)，100vw等于瀏覽器可見(jiàn)寬度。
rem：CSS布局單位，1rem等于html標(biāo)簽的font-size屬性值大小。
CSS locks：利用CSScalc函數(shù)，給定使用該函數(shù)的屬性最小值和最大值，動(dòng)態(tài)計(jì)算出該屬性在規(guī)定的屏幕最小尺寸和最大尺寸區(qū)間內(nèi)，適應(yīng)當(dāng)前屏幕大小的屬性值。在Flexible typography with CSS locks一文中，作者詳細(xì)闡述了CSS locks的由來(lái)，推薦查閱。
先看案例：
p {
font-size: 16px; /* 最小字體 */
}
@media screen and (min-width: 400px) {
/* 屏幕寬度大于400px，大于640px時(shí)，采用CSS locks */
p {
font-size: calc(16px + (20 - 16) * ((100vw - 400px) / (640 - 400)));
}
}
@media screen and (min-width: 640px) {
/* 屏幕寬度大于640px */
p {
font-size: 20px; /* 最大字體 */
}
}
復(fù)制代碼
利用以上CSS代碼，我們就可以做出類似效果：
從圖中可以發(fā)現(xiàn)，文章段落的font-size屬性值隨著屏幕大小改變而發(fā)生有規(guī)律的變化，這種變化使得在不同尺寸的設(shè)備上，也不會(huì)減小文章的可讀性。而事實(shí)上，CSS locks 令人驚嘆的地方也不止于此，我們完全可以將它發(fā)揮在其他數(shù)值型CSS屬性(這里指類似font-size等屬性)上。
我們知道，rem單位與html標(biāo)簽的字體大小緊密相關(guān)，如果我們使用CSS locks根據(jù)當(dāng)前屏幕寬度(也就是100vw)動(dòng)態(tài)計(jì)算出html標(biāo)簽的font-size屬性值，然后使用媒體查詢限制最大和最小值，這樣，在其他數(shù)值型CSS屬性中我們就直接使用rem單位。如此一來(lái)，只需要少量的媒體查詢代碼，不同屏幕尺寸適配問(wèn)題就會(huì)迎刃而解。
在CSS中，其實(shí)出現(xiàn)過(guò)類似CSS locks功能的函數(shù)，如clamp()，min()，max()三個(gè)函數(shù)，它們的功能更加強(qiáng)大，寫(xiě)起來(lái)也更加簡(jiǎn)單優(yōu)雅，但由于目前的兼容性較差，所以不建議在實(shí)際項(xiàng)目中使用。如想深入了解，推薦張?chǎng)涡翊罄械奈恼隆私釩SS min()/max()/clamp()數(shù)學(xué)函數(shù)。這里就不再贅述了。
公式與實(shí)踐
從上文中可得出vw+rem+CSS locks方案公式如下：
CSS
[minimum size]：最小字體大小。
[maximum size]：最大字體大小。
[minimum viewport width]：最小屏幕寬度。
[maximum viewport width]：最大屏幕寬度。
html {
font-size: [minimum size];
}
@media screen and (min-width: [minimum viewport width]) {
html {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
}
@media screen and (min-width: [maximum viewport width]) {
html {
font-size: [maximum size];
}
}
復(fù)制代碼
SCSS
利用SCSS中的Mixin指令和函數(shù)指令，增加了公式的復(fù)用性，也讓我們的代碼更加優(yōu)雅。
$properties：屬性名。
$min-screen：最小屏幕寬度。
$max-screen：最大屏幕寬度。
$min-value：屬性最小值。
$max-value：屬性最大值。
@mixin interpolate($properties, $min-screen, $max-screen, $min-value, $max-value) {
& {
@each $property in $properties {
#{$property}: $min-value;
}
@media screen and (min-width: $min-screen) {
@each $property in $properties {
#{$property}: css-locks($min-screen, $min-value, $max-screen, $max-value);
}
}
@media screen and (min-width: $max-screen) {
@each $property in $properties {
#{$property}: $max-value;
}
}
}
}
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
@function css-locks($min-screen, $min-value, $max-screen, $max-value) {
@return calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * ((100vw - #{$min-screen}) / #{strip-unit($max-screen - $min-screen)}));
}
復(fù)制代碼
針對(duì)某一個(gè)屬性我們就可以這樣寫(xiě)：
p {
@include interpolate(font-size, 400px, 640px, 16px, 20px);
}
復(fù)制代碼
如果不需要限制極值，也可以單獨(dú)使用css-locks函數(shù)：
html {
font-size: css-locks($min-screen, $min-value, $max-screen, $max-value)
}
復(fù)制代碼
結(jié)語(yǔ)
隨著CSS技術(shù)領(lǐng)域更新迭代，除了少數(shù)古老的瀏覽器，視口單位已經(jīng)基本兼容市面上的瀏覽器設(shè)備。顯然，采用vw+rem+CSS locks方案解決pc端和mobile端適配問(wèn)題會(huì)是目前較為理想的方案，特別是對(duì)于頁(yè)面結(jié)構(gòu)相對(duì)簡(jiǎn)單的博客系統(tǒng)來(lái)說(shuō)更是堪稱完美。具體案例可以查看我的博客小站—Freesims。
以上就是本文的全部?jī)?nèi)容，如有不正確的地方，請(qǐng)指出。
感謝閱讀，歡迎分享！
總結(jié)
以上是生活随笔為你收集整理的css pc和mobile,初识pc端和mobile端CSS适配利器—vw+rem+CSS locks的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 绅士计算机乐谱之谦,绅士(简单钢琴独奏版
- 下一篇： css中光标的设置,CSS Cursor