資訊專欄INFORMATION COLUMN
摘要：流式布局概念流式布局是頁面元素寬度按照屏幕分辨率進行適配調整，但是整體布局不變。有些手機頁面的寬度會被拉伸，但是高度不變，很不協調。弊端全局縮放，可能會造成出錯。這兩者適合在大項目中，因為可以配合或是，不適合單頁面。
1. 流式布局
概念：
流式布局是頁面元素寬度按照屏幕分辨率進行適配調整，但是整體布局不變。
設計方法：
布局都是通過百分比來定義寬度，但是高度大都是用px固定的。
弊端：
雖然可以讓各種屏幕適配，但是顯示的效果極其不好。（有些手機頁面的寬度會被拉伸，但是高度不變，很不協調。）
大量百分比布局，也會出現許多兼容問題。
2. 靜態布局概念：
靜態布局是不管瀏覽器尺寸是多少，網頁上所有元素的尺寸一律使用px作為單位，。這種設計常用于pc端
設計方法：
結合min-width，如果小于這個寬度就會出現滾動條，如果大于這個寬度，則會出現留白
弊端：
大屏幕手機兩側留白太多，頁面會顯得比較小，操作按鈕也比較小
這種設計只適用于PC端，移動端有嚴重的不兼容性
3. 媒體查詢@media概念：
媒體查詢是css3的新屬性，為不同屏幕分辨率定義一個布局樣式，即元素的位置和大小都是會改變的。
設計方法：
根據不同的分辨率來設計所需要的元素的位置和大小
//適配iphone 5
@media screen and (max-width: 320px) {
html{font-size: 14px;}
.name{
font-size: 14px;
margin-top: 28px;
}
}
//適配寬度在321px - 413px 之間
@media screen and (min-width: 321px) and (max-width: 413px) {
html{font-size: 16px;}
.name{
font-size: 16px;
margin-top: 32px;
}
}
//適配寬度在414px - 639px 之間
@media screen and (min-width: 414px) and (max-width: 639px) {
html{font-size: 17px;}
.name{
font-size: 17px;
margin-top: 34px;
}
}
//適配寬度大于640px
@media screen and (min-width: 640px) {
html{font-size: 18px;}
.name{
font-size: 18px;
margin-top: 36px;
}
}
弊端：
要匹配足夠多的屏幕大小，工作大，維護性難，需要足夠大的耐心
媒體查詢也是有限的，可以枚舉出來的只能適應主流的寬高
4. 設置viewport進行縮放概念：
通過來提供一些頁面的元信息，位于文檔的頭部標簽內來進行縮放
設計方法：
通過設置最大縮放比maximum-sacle和最小縮放比minimum-scale來兼容屏幕。
弊端：
全局縮放，可能會造成出錯。一般不多帶帶使用，可以結合媒體查詢或是rem單位等來使用。
5. rem等比例適配屏幕概念：
rem是css3新增的一個相對長度單位，相對于根元素（即html元素）font-size計算值的倍數。通過設置html的字體大小，來控制rem的大小。
設計方法：
1）@media媒體查詢在css中定義好根元素的font-size的大小
通過@media媒體查詢來更改html的字體大小，實現兼容不同的設備。
//適配iphone 5
@media screen and (max-width: 320px) {
html{font-size: 14px;} //1rem = 14px
}
//適配寬度在321px - 413px 之間
@media screen and (min-width: 321px) and (max-width: 413px) {
html{font-size: 16px;} //1rem = 16px
}
//適配寬度在414px - 639px 之間
@media screen and (min-width: 414px) and (max-width: 639px) {
html{font-size: 17px;} //1rem = 17px
}
//適配寬度大于640px
@media screen and (min-width: 640px) {
html{font-size: 18px;} //1rem = 18px
}
設計好根元素之后，頁面中所有的元素的位置和大小單位都采用rem來寫。
2）js動態計算font-size大小
用@media來設置根元素的font-size不能使所有的設備全適配，用js來計算font-size可以實現全適配。在
也可以把這兩個文件下載到自己的項目中，然后引入，效果是一樣的。
3）頁面單位采用rem格式
可以通過一些插件快速的將px->rem，比如sublime text 3 的 CSSREM 插件可以完成自動轉換。
除了使用編輯器的插件外，還可以使用css 預處理器，比如scss，里面的函數、混合宏這些功能來實現。
還有一款npm工具是px2rem，或是使用PostCSS。這兩者適合在大項目中，因為可以配合gulp 或是 webpack，不適合單頁面。
4）頁面效果
配置好flexible.js后，可以在頁面上看到它給元素添加了data-dpr屬性和font-size屬性，并且兩者會根據不同的手機分辨率來動態的改變它們的值。
弊端：
不適配平板
不兼容其他的UI框架組件，比如：vux, weui, mini ui等。因為市面上的一些UI 組件都是自身已經做過適配的，再結合flexible的話，會導致整體組件被縮小，反而處理起來更加麻煩
7. vw, vh, vmax, vmin屬性概念：
vw，vh是css3新增的單位屬性，他們的計算方式是相對于視口的寬度和高度。視口被均分為100單位
vmax相對于視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位
vmin相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的
設計方式：
元素的位置和大小采用vw , vh , vmax , vmin 為單位
弊端：
兼容性問題，有些手機不兼容這個單位
綜上所述：
單一的H5頁面可以通過動態計算js來改變font-size大小。
大型的項目比如webpack項目可以采用rem + flexible + sass
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52257.html
摘要：流式布局概念流式布局是頁面元素寬度按照屏幕分辨率進行適配調整，但是整體布局不變。有些手機頁面的寬度會被拉伸，但是高度不變，很不協調。弊端全局縮放，可能會造成出錯。這兩者適合在大項目中，因為可以配合或是，不適合單頁面。 1. 流式布局 概念：流式布局是頁面元素寬度按照屏幕分辨率進行適配調整，但是整體布局不變。 設計方法：布局都是通過百分比來定義寬度，但是高度大都是用px固定的。 弊端：...
摘要：后續我們還會增加一些實戰類的移動開發案例，歡迎關注專欄。進入官網新版預覽在線預覽需要使用開啟設備模擬，效果更佳。 前言 之前寫過一篇 2018開發最快的Webapp框架--BUI交互框架 ，如果你還沒看過，可以簡單看一下，主要介紹了BUI的基本功能，有多少控件，以及實現的思路，BUI 1.5版本以后變化很大，統一新的風格，新的規范750，新增基于Dom的數據驅動，完善了頁面的生命周期等...
摘要：先來看下機型的樣子上圖中，機型在頭部和底部新增了這兩個區域，所以我們需要針對這類機型做些適配，方便我們的的展示做成的移動端頁面，常見布局為頭部軀干底部三欄模式，頭部和頂部都是固定定位，軀干可里的內容可以滾動，暫定的布局如下但如果沒采用機型的 先來看下iPhone X機型的樣子 showImg(https://segmentfault.com/img/bVbugGA?w=297&h=60...
摘要：先來看下機型的樣子上圖中，機型在頭部和底部新增了這兩個區域，所以我們需要針對這類機型做些適配，方便我們的的展示做成的移動端頁面，常見布局為頭部軀干底部三欄模式，頭部和頂部都是固定定位，軀干可里的內容可以滾動，暫定的布局如下但如果沒采用機型的 先來看下iPhone X機型的樣子 showImg(https://segmentfault.com/img/bVbugGA?w=297&h=60...
摘要：例如改成例如改成以上兩種開發方式都可以結合原生平臺打包成獨立應用。 繼上一篇一張腦圖看懂BUI Webapp移動快速開發框架【上】--框架與工具、資源 大綱 在線查看大綱 思路更佳清晰 1. 框架設計 框架介紹 簡介 BUI 是用來快速構建界面交互的UI交互框架, 專注webapp開發, 開發者只需關注業務的開發, 界面的布局及交互交給BUI, 開發出來的應用, 可以嵌入平臺 ( Li...
閱讀 2701·2023-04-25 14:59
閱讀 888·2021-11-22 11:59
閱讀 635·2021-11-17 09:33
閱讀 2468·2021-09-27 13:34
閱讀 3898·2021-09-09 11:55
閱讀 2320·2019-08-30 15:44
閱讀 1123·2019-08-30 14:06
閱讀 1924·2019-08-29 16:55
