国产乱码一区二区三区爽爽爽,国产激情刺激男女视频在线观看

類似于百分比布局，但更好使用。
響應(yīng)布局方法4: rem Rem單位是相對(duì)于字體大小的html元素，也稱為根元素。默認(rèn)情況下，html元素的字體大小是16px 。因此，1rem = 16px 。
頭版
@media screen and (max-width: 414px) { html { font-size: 18px }}@media screen and (max-width: 375px) { html { font-size: 16px }}@media screen and (max-width: 320px) { html { font-size: 12px }}
使用rem和媒體查詢，當(dāng)分辨率改變時(shí)，給它一個(gè)不同的字體大小。
優(yōu)化版本
//動(dòng)態(tài)為根元素設(shè)置字體大小function init () { // 獲取屏幕寬度 var width = document.documentElement.clientWidth // 設(shè)置根元素字體大小。此時(shí)為寬的10等分 document.documentElement.style.fontSize = width / 10 + ‘px’}//首次加載應(yīng)用，設(shè)置一次init()// 監(jiān)聽手機(jī)旋轉(zhuǎn)的事件的時(shí)機(jī)，重新設(shè)置window.addEventListener(‘orientationchange’, init)// 監(jiān)聽手機(jī)窗口變化，重新設(shè)置window.addEventListener(‘resize’, init)
理解:上面的代碼實(shí)現(xiàn)了無論設(shè)備的可視窗口如何變化，rem總是設(shè)置為寬度的1/10 。也就是說，實(shí)現(xiàn)了百分比布局。沒有第一版的媒體質(zhì)疑那么生硬。
上面的代碼應(yīng)該寫在dom之前(可以放在head的第一個(gè)script標(biāo)簽里)
用UI框架實(shí)現(xiàn)響應(yīng)式布局其實(shí)目前主流的UI框架都會(huì)考慮響應(yīng)式布局的問題。例如，elementUI和iview等框架提供了網(wǎng)格系統(tǒng)，
移動(dòng)響應(yīng)布局視口 lt;meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” /gt;
Width=device-width:是自適應(yīng)手機(jī)屏幕的尺寸寬度。Maximum-scale:是縮放比例的最大值。Minimum-scale:是縮放比例的最小值。Inital-scale:是縮放的初始化。用戶可伸縮:用戶的可伸縮操作。
這種寫法是用戶無法縮放的頁面設(shè)計(jì) 。因?yàn)?，如果頁面可以縮放，會(huì)影響用戶的體驗(yàn) 。在手機(jī)上，我們都可以找到點(diǎn)擊的按鈕或者感興趣的菜單進(jìn)行操作。第二，如果我們讓頁面縮放，就會(huì)完全暴露我們手機(jī)app的html架構(gòu) 。所以我們?cè)跒橐苿?dòng)設(shè)計(jì)頁面的時(shí)候，不需要用戶縮放。
靈活. js Flexible.js由阿里手淘團(tuán)隊(duì)開發(fā) 。用于解決移動(dòng)終端的適配問題。
現(xiàn)在假設(shè)你想適應(yīng)一臺(tái)iphone6設(shè)備。設(shè)計(jì)師給出了寬度為750px的設(shè)計(jì)稿(注意這里是750px而不是375px) 。前端工程師開始用750px的比例還原，轉(zhuǎn)換成寬高為px的rem字體而不是remflexible.js會(huì)自動(dòng)判斷dpr放大縮小整個(gè)布局視口。至于如何使用flexible.js，大家可以自己去搜，因?yàn)槲以谝苿?dòng)端做的不多，就不多說了。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容，請(qǐng)發(fā)送郵件至 www.mianfo.com 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。

以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請(qǐng)您及時(shí)就醫(yī)或請(qǐng)專業(yè)人士給予相關(guān)指導(dǎo)!

「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對(duì)您有所幫助：

什么是響應(yīng)式布局如何實(shí)現(xiàn) 響應(yīng)式布局有哪些方式( 二 )