国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webApp 頁面布局

JasonZhang / 1908人閱讀

摘要：流式布局概念流式布局是頁面元素寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但是整體布局不變。有些手機(jī)頁面的寬度會(huì)被拉伸，但是高度不變，很不協(xié)調(diào)。弊端全局縮放，可能會(huì)造成出錯(cuò)。這兩者適合在大項(xiàng)目中，因?yàn)榭梢耘浜匣蚴牵贿m合單頁面。

1. 流式布局

概念：
流式布局是頁面元素寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但是整體布局不變。

設(shè)計(jì)方法：
布局都是通過百分比來定義寬度，但是高度大都是用px固定的。

弊端：

雖然可以讓各種屏幕適配，但是顯示的效果極其不好。（有些手機(jī)頁面的寬度會(huì)被拉伸，但是高度不變，很不協(xié)調(diào)。）

大量百分比布局，也會(huì)出現(xiàn)許多兼容問題。

2. 靜態(tài)布局

概念：
靜態(tài)布局是不管瀏覽器尺寸是多少，網(wǎng)頁上所有元素的尺寸一律使用px作為單位，。這種設(shè)計(jì)常用于pc端

設(shè)計(jì)方法：
結(jié)合min-width，如果小于這個(gè)寬度就會(huì)出現(xiàn)滾動(dòng)條，如果大于這個(gè)寬度，則會(huì)出現(xiàn)留白

弊端：

大屏幕手機(jī)兩側(cè)留白太多，頁面會(huì)顯得比較小，操作按鈕也比較小

這種設(shè)計(jì)只適用于PC端，移動(dòng)端有嚴(yán)重的不兼容性

3. 媒體查詢@media

概念：
媒體查詢是css3的新屬性，為不同屏幕分辨率定義一個(gè)布局樣式，即元素的位置和大小都是會(huì)改變的。

設(shè)計(jì)方法：
根據(jù)不同的分辨率來設(shè)計(jì)所需要的元素的位置和大小

//適配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;
    }
}

弊端：

要匹配足夠多的屏幕大小，工作大，維護(hù)性難，需要足夠大的耐心

媒體查詢也是有限的，可以枚舉出來的只能適應(yīng)主流的寬高

4. 設(shè)置viewport進(jìn)行縮放

概念：
通過來提供一些頁面的元信息，位于文檔的頭部標(biāo)簽內(nèi)來進(jìn)行縮放

設(shè)計(jì)方法：

通過設(shè)置最大縮放比maximum-sacle和最小縮放比minimum-scale來兼容屏幕。

弊端：

全局縮放，可能會(huì)造成出錯(cuò)。一般不多帶帶使用，可以結(jié)合媒體查詢或是rem單位等來使用。

5. rem等比例適配屏幕

概念：
rem是css3新增的一個(gè)相對(duì)長(zhǎng)度單位，相對(duì)于根元素（即html元素）font-size計(jì)算值的倍數(shù)。通過設(shè)置html的字體大小，來控制rem的大小。

設(shè)計(jì)方法：
1）@media媒體查詢?cè)?b>css中定義好根元素的font-size的大小

通過@media媒體查詢來更改html的字體大小，實(shí)現(xiàn)兼容不同的設(shè)備。

//適配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
}

設(shè)計(jì)好根元素之后，頁面中所有的元素的位置和大小單位都采用rem來寫。

2）js動(dòng)態(tài)計(jì)算font-size大小

用@media來設(shè)置根元素的font-size不能使所有的設(shè)備全適配，用js來計(jì)算font-size可以實(shí)現(xiàn)全適配。在

也可以把這兩個(gè)文件下載到自己的項(xiàng)目中，然后引入，效果是一樣的。

3）頁面單位采用rem格式
可以通過一些插件快速的將px->rem，比如sublime text 3 的 CSSREM 插件可以完成自動(dòng)轉(zhuǎn)換。

除了使用編輯器的插件外，還可以使用css 預(yù)處理器，比如scss，里面的函數(shù)、混合宏這些功能來實(shí)現(xiàn)。

還有一款npm工具是px2rem，或是使用PostCSS。這兩者適合在大項(xiàng)目中，因?yàn)榭梢耘浜?b>gulp 或是 webpack，不適合單頁面。

4）頁面效果
配置好flexible.js后，可以在頁面上看到它給元素添加了data-dpr屬性和font-size屬性，并且兩者會(huì)根據(jù)不同的手機(jī)分辨率來動(dòng)態(tài)的改變它們的值。

弊端：

不適配平板

不兼容其他的UI框架組件，比如：vux, weui, mini ui等。因?yàn)槭忻嫔系囊恍?b>UI 組件都是自身已經(jīng)做過適配的，再結(jié)合flexible的話，會(huì)導(dǎo)致整體組件被縮小，反而處理起來更加麻煩

7. vw, vh, vmax, vmin屬性

概念：
vw，vh是css3新增的單位屬性，他們的計(jì)算方式是相對(duì)于視口的寬度和高度。視口被均分為100單位
vmax相對(duì)于視口的寬度或高度中較大的那個(gè)。其中最大的那個(gè)被均分為100單位
vmin相對(duì)于視口的寬度或高度中較小的那個(gè)。其中最小的那個(gè)被均分為100單位的

設(shè)計(jì)方式：
元素的位置和大小采用vw , vh , vmax , vmin 為單位

弊端：
兼容性問題，有些手機(jī)不兼容這個(gè)單位

綜上所述：
單一的H5頁面可以通過動(dòng)態(tài)計(jì)算js來改變font-size大小。
大型的項(xiàng)目比如webpack項(xiàng)目可以采用rem + flexible + sass

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/113167.html

相關(guān)文章

  • webApp 頁面布局

    摘要：流式布局概念流式布局是頁面元素寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但是整體布局不變。有些手機(jī)頁面的寬度會(huì)被拉伸，但是高度不變，很不協(xié)調(diào)。弊端全局縮放，可能會(huì)造成出錯(cuò)。這兩者適合在大項(xiàng)目中，因?yàn)榭梢耘浜匣蚴牵贿m合單頁面。 1. 流式布局 概念：流式布局是頁面元素寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但是整體布局不變。 設(shè)計(jì)方法：布局都是通過百分比來定義寬度，但是高度大都是用px固定的。 弊端：...

    GitChat 評(píng)論0 收藏0

  • 一張腦圖看懂BUI Webapp移動(dòng)快速開發(fā)框架【上】--框架與工具、資源

    摘要：后續(xù)我們還會(huì)增加一些實(shí)戰(zhàn)類的移動(dòng)開發(fā)案例，歡迎關(guān)注專欄。進(jìn)入官網(wǎng)新版預(yù)覽在線預(yù)覽需要使用開啟設(shè)備模擬，效果更佳。 前言 之前寫過一篇 2018開發(fā)最快的Webapp框架--BUI交互框架 ，如果你還沒看過，可以簡(jiǎn)單看一下，主要介紹了BUI的基本功能，有多少控件，以及實(shí)現(xiàn)的思路，BUI 1.5版本以后變化很大，統(tǒng)一新的風(fēng)格，新的規(guī)范750，新增基于Dom的數(shù)據(jù)驅(qū)動(dòng)，完善了頁面的生命周期等...

    wuyumin 評(píng)論0 收藏0

  • H5移動(dòng)端適配IphoneX等機(jī)型

    摘要：先來看下機(jī)型的樣子上圖中，機(jī)型在頭部和底部新增了這兩個(gè)區(qū)域，所以我們需要針對(duì)這類機(jī)型做些適配，方便我們的的展示做成的移動(dòng)端頁面，常見布局為頭部軀干底部三欄模式，頭部和頂部都是固定定位，軀干可里的內(nèi)容可以滾動(dòng)，暫定的布局如下但如果沒采用機(jī)型的 先來看下iPhone X機(jī)型的樣子 showImg(https://segmentfault.com/img/bVbugGA?w=297&h=60...

    happyfish 評(píng)論0 收藏0

  • H5移動(dòng)端適配IphoneX等機(jī)型

    摘要：先來看下機(jī)型的樣子上圖中，機(jī)型在頭部和底部新增了這兩個(gè)區(qū)域，所以我們需要針對(duì)這類機(jī)型做些適配，方便我們的的展示做成的移動(dòng)端頁面，常見布局為頭部軀干底部三欄模式，頭部和頂部都是固定定位，軀干可里的內(nèi)容可以滾動(dòng)，暫定的布局如下但如果沒采用機(jī)型的 先來看下iPhone X機(jī)型的樣子 showImg(https://segmentfault.com/img/bVbugGA?w=297&h=60...

    MoAir 評(píng)論0 收藏0

  • 一張腦圖看懂BUI Webapp移動(dòng)快速開發(fā)框架【下】--快速入門指引

    摘要：例如改成例如改成以上兩種開發(fā)方式都可以結(jié)合原生平臺(tái)打包成獨(dú)立應(yīng)用。 繼上一篇一張腦圖看懂BUI Webapp移動(dòng)快速開發(fā)框架【上】--框架與工具、資源 大綱 在線查看大綱 思路更佳清晰 1. 框架設(shè)計(jì) 框架介紹 簡(jiǎn)介 BUI 是用來快速構(gòu)建界面交互的UI交互框架, 專注webapp開發(fā), 開發(fā)者只需關(guān)注業(yè)務(wù)的開發(fā), 界面的布局及交互交給BUI, 開發(fā)出來的應(yīng)用, 可以嵌入平臺(tái) ( Li...

    hzx 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<