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