諸多的手機(jī)廠商，導(dǎo)致每種手機(jī)機(jī)型、分辨率等手機(jī)參數(shù)相差很多，同時(shí)給前端開(kāi)發(fā)人員增加了工作難度

此時(shí)手機(jī)端的適配" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷(xiāo)資訊 > 網(wǎng)站運(yùn)營(yíng) > 自適應(yīng)網(wǎng)站頁(yè)面適配實(shí)現(xiàn)和基本原理講解

自適應(yīng)網(wǎng)站頁(yè)面適配實(shí)現(xiàn)和基本原理講解

時(shí)間：2023-09-05 23:54:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-05 23:54:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

自適應(yīng)網(wǎng)站頁(yè)面適配實(shí)現(xiàn)和基本原理講解：隨移動(dòng)端設(shè)備的普及，移動(dòng)web網(wǎng)站成為了前端工程師工作主攻點(diǎn)

諸多的手機(jī)廠商，導(dǎo)致每種手機(jī)機(jī)型、分辨率等手機(jī)參數(shù)相差很多，同時(shí)給前端開(kāi)發(fā)人員增加了工作難度

此時(shí)手機(jī)端的適配是個(gè)不得不解決的問(wèn)題

下面介紹一下網(wǎng)站適配的實(shí)現(xiàn)及原理是如何操作的

首先要在html頁(yè)面中添加適配meta標(biāo)簽使頁(yè)面與手機(jī)設(shè)備寬度生成一定比例：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">自適應(yīng)工作原理也比較簡(jiǎn)單

將外層容器元素按照百分比鋪滿

容器內(nèi)元素生成固定像素或百分比或左右浮動(dòng)形式來(lái)進(jìn)行內(nèi)容填充

<div class="div"> <div class="div1">div1</div> <div class="div2">div2</div></div>.div { width: 100%; overflow: hidden;}.div1 { width: 20%; height: 50px; float: left;}.div2 { width: 50px; height: 50px; float: right;}由于父級(jí)元素采用百分比的布局方式，隨著屏幕的拉伸，它的寬度會(huì)無(wú)限的拉伸

而子元素由于采用了浮動(dòng)，那么它們的位置也會(huì)固定在兩端

但適配方法隨著迭代發(fā)展，也慢慢的被flex彈性伸縮盒子的布局方式所替代

除此之外，在移動(dòng)端的HTML頁(yè)面上不要使用絕對(duì)字體(px)

而要使用相對(duì)字體(em/rem)

對(duì)于大多數(shù)瀏覽器來(lái)說(shuō)，通常用em = px/16換算，例如16px就等于1em

rem屬性指的是相對(duì)于根元素設(shè)置某個(gè)元素的字體大小

它同時(shí)也可以用作為設(shè)置高度等一系列可以用px來(lái)標(biāo)注的單位

寫(xiě)入以下一段js，以寬度為375的手機(jī)設(shè)備為例，將頁(yè)面中'px'單位轉(zhuǎn)換為'rem'

(function(doc, win) { var docE1 = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docE1.clientWidth; if (!clientWidth) return; docE1.style.fontSize = 15 * (clientWidth / 375) + 'px'; // 轉(zhuǎn)化為25rem }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);原創(chuàng)文章鏈接:https://www.toutiao.com/i6881889214640685571/

關(guān)鍵詞：實(shí)現(xiàn),基本,原理,講解,適應(yīng)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉