1.@media screen實現網頁佈局的自適應
優點: 無需插件,能夠適應各種視窗大小，只需在CSS中加入@media screen屬性。
官方文件：@media 可以為不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。
語法：@media mediatype and|not|only (media feature) { CSS-Code; }
/* 屏幕宽度大于 1200px 则 h5 的字体颜色是black */ h5{ color: black; } @media screen and (max-width: 1200px){ h5{ color: #eee; } } /* h5字体颜色为红色，屏幕宽度只有在869px 与900px之间生效 */ @media screen and (min-width: 869px) and (max-width: 900px){ h5{ color: red; } } /* 屏幕宽度小于 320px 则 h5 的字体大小是20px */ @media only screen and (max-width: 320px){ h5{ 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); }
CSS教學》
以上是4種行動端適配方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
