前端如何解決pc端屏幕顯示設(shè)置縮放比例對(duì)頁(yè)面布局的影響？

這個(gè)坑還真踩過(guò)，前前后后花了小一個(gè)禮拜的工夫。首先，單獨(dú)的響應(yīng)式布局hold不住這個(gè)問(wèn)題，因?yàn)槌鰡?wèn)題的是device-pixel-ratio。問(wèn)題現(xiàn)象是高分屏下整好的東西，在普分屏下會(huì)放大；而普分屏下整好的東西，在高分屏上會(huì)縮小。重現(xiàn)這個(gè)問(wèn)題不需要高分屏，直接用Ctrl++或者Ctrl+-出來(lái)的效果是跟高分屏一致的（所以搞定這個(gè)問(wèn)題之后，也可以同時(shí)預(yù)防用戶誤觸網(wǎng)頁(yè)縮放）。另外恢復(fù)是Ctrl+Num0解決的關(guān)鍵就是你得在媒體適配里寫device-pixel-ratio單獨(dú)適配像素比；另外，需要把絕大多數(shù)組件由px單位轉(zhuǎn)換為rem單位，因?yàn)樾枰谇斑吿岬降膁evice-pixel-ratio里調(diào)節(jié):root的font-size，以達(dá)到動(dòng)態(tài)縮放的目的（加上兼容）寫好以后的代碼類似：
@media alland (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18), (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18), (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) { :root { font-size: 14px; }}@media alland (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28), (-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28), (min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) { :root { font-size: 13px; }}@media alland (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4), (-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4), (min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) { :root { font-size: 12px; }}@media alland (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6), (-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6), (min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) { :root { font-size: 10px; }}@media alland (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8), (-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8), (min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) { :root { font-size: 9px; }}@media alland (-moz-min-device-pixel-ratio: 1.81) and (-moz-max-device-pixel-ratio: 2.1), (-webkit-min-device-pixel-ratio: 1.81) and (-webkit-max-device-pixel-ratio: 2.1), (min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) { :root { font-size: 8px; }}

網(wǎng)頁(yè)名稱：前端如何解決pc端屏幕顯示設(shè)置縮放比例對(duì)頁(yè)面布局的影響？
當(dāng)前鏈接：http://www.bm7419.com/news0/189700.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、搜索引擎優(yōu)化、面包屑導(dǎo)航、用戶體驗(yàn)、全網(wǎng)營(yíng)銷推廣、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)