前端如何解決pc端屏幕顯示設置縮放比例對頁面布局的影響？

這個坑還真踩過，前前后后花了小一個禮拜的工夫。首先，單獨的響應式布局hold不住這個問題，因為出問題的是device-pixel-ratio。問題現象是高分屏下整好的東西，在普分屏下會放大；而普分屏下整好的東西，在高分屏上會縮小。重現這個問題不需要高分屏，直接用Ctrl++或者Ctrl+-出來的效果是跟高分屏一致的（所以搞定這個問題之后，也可以同時預防用戶誤觸網頁縮放）。另外恢復是Ctrl+Num0解決的關鍵就是你得在媒體適配里寫device-pixel-ratio單獨適配像素比；另外，需要把絕大多數組件由px單位轉換為rem單位，因為需要在前邊提到的device-pixel-ratio里調節:root的font-size，以達到動態縮放的目的（加上兼容）寫好以后的代碼類似：
@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; }}

文章名稱：前端如何解決pc端屏幕顯示設置縮放比例對頁面布局的影響？
瀏覽路徑：http://m.kartarina.com/news/189700.html

成都網站建設公司_創新互聯，為您提供移動網站建設、網站維護、用戶體驗、Google、響應式網站、外貿建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯