css移動端適配的方法有幾種

css移動端適配的方法有幾種？這篇文章運用了實例代碼展示，代碼非常詳細，可供感興趣的小伙伴們參考借鑒，希望對大家有所幫助。

1.@media screen實現網頁布局的自適應

優點 : 無需插件,能夠適應各種窗口大小，只需在CSS中添加@media screen屬性。

官方文檔：@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。

語法：@media mediatype and|not|only (media feature) { CSS-Code; }

/* 屏幕寬度大于 1200px 則 h6 的字體顏色是black */
h6{
    color: black;
  }
@media screen and (max-width: 1200px){
  h6{
    color: #eee;
  }
}
/* h6字體顏色為紅色，屏幕寬度只有在869px 與900px之間生效 */
@media screen and (min-width: 869px) and (max-width: 900px){
  h6{
    color: red;
  }
}
/* 屏幕寬度小于 320px 則 h6 的字體大小是20px */
@media only screen and (max-width: 320px){
  h6{
    font-size: 20px;
  }
}

緊接著我開始接觸移動端的適配。

2.rem適配

這個方法是CSDN博主「sxs1995」的原創文章，blog.csdn.net/sxs1995/art…

計算單位是 640px = 6.40rem,

當設計稿的寬度是 750px 時， i = 750； 當設計稿的寬度是 640px 時， i = 640 。

缺點 ： 首次加載頁面時，會閃線1-2s，在手機上預覽的用戶體驗不好

!function(n){
  var  e=n.document,
  t=e.documentElement,
  i=720,
  d=i/100,
  o="orientationchange"in n?"orientationchange":"resize",
  a=function(){
    var n=t.clientWidth||320;n>720&&(n=720);
    t.style.fontSize=n/d+"px"
 };
  e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

3.用@media實現rem適配

優點：當屏幕寬度更改時，只需修改Html元素中的 font-size 即可適配

/* 不同屏幕寬度，設置不同的font-size */
@media screen and (width:750px){html{font-size:100px}}
@media screen and (width:749px){html{font-size:99.87px}}
@media screen and (width:748px){html{font-size:99.73px}}
...
@media screen and (width:321px){html{font-size:42.8px}}
@media screen and (width:320px){html{font-size:42.67px}}

4.用vw定制rem自適應布局

在掘金上看到作者JowayYoung的靈活運用CSS開發技巧的文章，其中一點是：使用vw定制rem自適應布局

優點 ： 移動端使用rem布局需要通過JS設置不同屏幕寬高比的font-size，結合vw單位和calc()可脫離JS的控制

/* 基于UI width=750px DPR=2的頁面 */
html {
  font-size: calc(100vw / 7.5);
}

以上就是ss移動端適配四種方法的詳細內容了，看完之后是否有所收獲呢？如果想了解更多相關內容，歡迎關注億速云行業資訊！