成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

移動(dòng)端web布局方案的知識(shí)總結(jié)

付永剛 / 2457人閱讀

摘要：做移動(dòng)端開(kāi)發(fā)時(shí)，我自己了解了種方法，我覺(jué)得目前適合我的方法就是用來(lái)作單位，配合新的屬性來(lái)適配屏幕做開(kāi)發(fā)。以上內(nèi)容為筆者總結(jié)的一些移動(dòng)端開(kāi)發(fā)布局的小知識(shí)，筆者知識(shí)技能有限，文章若有理解錯(cuò)誤的地方還請(qǐng)讀者理解并指出，筆者會(huì)虛心學(xué)習(xí)。

做移動(dòng)端web開(kāi)發(fā)時(shí)，我自己了解了4種方法，我覺(jué)得目前適合我的方法就是用rem來(lái)作單位，配合h5新的meta屬性來(lái)適配屏幕做開(kāi)發(fā)。
首先介紹一下meta標(biāo)簽

name="viewport"是來(lái)告訴瀏覽器這個(gè)meta屬性是設(shè)置設(shè)備視口的
content=""是設(shè)置視口的具體內(nèi)容
width=device-width這段代碼告訴瀏覽器，頁(yè)面的寬度就等當(dāng)前設(shè)備的視口寬度，
initial-scale=1,代表初始的頁(yè)面縮放比例為1，
minimum-scale=1代表縮放的最小比例為1,
maximum-scale=1代表縮放的最大比例為1
user-scalable=no代表不允許用戶進(jìn)行手動(dòng)縮放。

在做開(kāi)發(fā)時(shí)，盡量把minimum-scale=1,maximum-scale=1帶上，因?yàn)橛行┑谌焦ぞ邥?huì)讓頁(yè)面縮放,加上這兩個(gè)時(shí)，代表最小縮放比例為1，最大縮放比例也為1，那就是不讓用戶進(jìn)行縮放。接下來(lái)說(shuō)縮放比例，即就是你寫(xiě)的css里的1px在屏幕上顯示也是1px的寬度，這就是1:1的縮放比例關(guān)系，當(dāng)你在移動(dòng)設(shè)備上做開(kāi)發(fā)時(shí)，為了能讓用戶在屏幕上看的更加清晰，這時(shí)Retina屏來(lái)了，他會(huì)把畫(huà)布的大小放大到原來(lái)的2倍，也就是說(shuō)現(xiàn)在我寫(xiě)的css里的1px在屏幕上展示的是2px的寬度。在平時(shí)開(kāi)發(fā)的時(shí)候我想要設(shè)置1px的邊框，總不可能在css里寫(xiě)0.5px吧，所以為了讓1px的寬度在屏幕上顯示也是1px的寬度，就只能去對(duì)頁(yè)面進(jìn)行縮放，也就是讓
這里先用0.5來(lái)說(shuō)。
當(dāng)縮放比例為1時(shí)，也就是我們來(lái)看看這段代碼的運(yùn)行結(jié)果。

運(yùn)行結(jié)果：

當(dāng)縮放比例為0.5時(shí)，也就是，我們來(lái)看看這段代碼的運(yùn)行結(jié)果。

這時(shí)邊框也能滿足我們的需求1px了。但是0.5哪里來(lái)的呢？別急，請(qǐng)看下面，咱們?cè)陂_(kāi)發(fā)時(shí)，有沒(méi)有注意這里的2.0

這就是縮放比，電腦屏幕縮放比為1:1，移動(dòng)設(shè)備就不一樣了。大家可以看切換設(shè)備看看各種手機(jī)的縮放比。前面用的0.5，就是縮放比分之一得到的。我們?cè)谧鲩_(kāi)發(fā)時(shí)，把meta里的各種縮放比例改成縮放比分之一就行了，但是我們又如何獲取各種設(shè)備的縮放比呢，放心，js里面已經(jīng)有了獲取屏幕縮放比的屬性了，window.devicePixelRatio,比如iphone5的這個(gè)值就是2等等。這樣有了縮放比。我們就可以通過(guò)js動(dòng)態(tài)設(shè)置meta標(biāo)簽和里面的縮放比了，有了這些內(nèi)容，我們就能在屏幕上做到1px顯示1px的顯示了。有了這些，我們就能用我今天所要介紹的第一種方法也是我最喜歡用的方法rem布局。
1rem就是1個(gè)根元素的字體大小，也就是說(shuō)html設(shè)置為20px,1rem就是20px;rem是相對(duì)于根元素html的，而em是基于父元素字體大小的。
像素還原到1:1后，我們拿寬為640的設(shè)計(jì)稿，iphone5的屏來(lái)適配，此時(shí)我們就可以按照稿子進(jìn)行原模原樣的切圖，也就是設(shè)計(jì)稿某區(qū)域切出來(lái)時(shí)為多少px，css就寫(xiě)多少px。最后我們把px全部轉(zhuǎn)換為rem，比如html的font-size大小是20px,div的寬度是100px,我們就可以把100px寫(xiě)成5rem。就這樣一直切完整個(gè)設(shè)計(jì)稿，終于完成了切圖，布局。（彈性盒子布局很強(qiáng)大，建議去看看）但是當(dāng)我們換一個(gè)設(shè)備比如說(shuō)iphone6p時(shí)，頁(yè)面布局又亂了，這是因?yàn)槲覀冊(cè)O(shè)置的html根元素的字體大小沒(méi)變，而屏幕大小變了，導(dǎo)致布局變亂了，那么我們就要根據(jù)屏幕的大小動(dòng)態(tài)的改變根元素的字體大小就行了。接下來(lái)看這段代碼，帶有注釋

加上上面的代碼之后，就能應(yīng)用在任何尺寸不同的設(shè)備上了。
下面介紹另外三種布局方式，目前我不喜歡用這些，未來(lái)可能會(huì)混合用到
1，定死頁(yè)面寬度，直接寫(xiě)一個(gè)div把寬度訂到設(shè)計(jì)稿的寬度或者你需要的寬度，然后讓它居中，再在這個(gè)div盒子里進(jìn)行你的頁(yè)面開(kāi)發(fā)，這種開(kāi)發(fā)的缺點(diǎn)就是當(dāng)遇到較大的屏幕時(shí)，屏幕的兩邊會(huì)流出白邊，影響美觀，體驗(yàn)不好。
2，利用百分比進(jìn)行開(kāi)發(fā)，把元素的高度固定，寬度給百分比，缺點(diǎn)就是在大屏幕上，元素的寬度被拉伸，導(dǎo)致寬高比例不協(xié)調(diào)，不夠美觀。
3，利用響應(yīng)式布局，根據(jù)不同的屏幕寬度，用不同的css樣式,這個(gè)方式代碼量大，比較復(fù)雜，不適合頁(yè)面布局復(fù)雜的大型網(wǎng)站，反而在博客，個(gè)人網(wǎng)站等比較小的網(wǎng)站上效果很好。

以上內(nèi)容為筆者總結(jié)的一些移動(dòng)端開(kāi)發(fā)布局的小知識(shí)，筆者知識(shí)技能有限，文章若有理解錯(cuò)誤的地方還請(qǐng)讀者理解并指出，筆者會(huì)虛心學(xué)習(xí)。

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

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

相關(guān)文章

  • 移動(dòng)端布局與適配

    摘要：實(shí)戰(zhàn)之微信錢(qián)包騰訊服務(wù)界面網(wǎng)格布局是讓開(kāi)發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對(duì)于移動(dòng)端適配，不同的公司不同的團(tuán)隊(duì)有不同的解決方案。柵格系統(tǒng)用于處理頁(yè)面多終端適配的問(wèn)題。 grid實(shí)戰(zhàn)之微信錢(qián)包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開(kāi)發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動(dòng)制作一個(gè)網(wǎng)格，實(shí)際上是你將一個(gè)元素聲明為一個(gè)網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動(dòng)端頁(yè)面適配—...

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

  • 移動(dòng)端web布局方案的知識(shí)總結(jié)

    摘要：做移動(dòng)端開(kāi)發(fā)時(shí)，我自己了解了種方法，我覺(jué)得目前適合我的方法就是用來(lái)作單位，配合新的屬性來(lái)適配屏幕做開(kāi)發(fā)。以上內(nèi)容為筆者總結(jié)的一些移動(dòng)端開(kāi)發(fā)布局的小知識(shí)，筆者知識(shí)技能有限，文章若有理解錯(cuò)誤的地方還請(qǐng)讀者理解并指出，筆者會(huì)虛心學(xué)習(xí)。 做移動(dòng)端web開(kāi)發(fā)時(shí)，我自己了解了4種方法，我覺(jué)得目前適合我的方法就是用rem來(lái)作單位，配合h5新的meta屬性來(lái)適配屏幕做開(kāi)發(fā)。首先介紹一下meta標(biāo)簽 ...

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

  • HTML-CSS

    摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 ...

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

  • HTML-CSS

    摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 ...

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

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

0條評(píng)論

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