px(css pixels)
em ex, ch
remvw,vh
百分比mdn
那麼什麼是裝置的物理畫素？
ppi（pixel per inch）
公式
// w: 橫向pixel
// h: 縱向pixel
// inch: 螢幕尺寸
ppi = math.sqrt(w * w + h * h) / inch
console.log(math.ceil(math.sqrt(1920 * 1920 + 1080 * 1080) / 5.5))
// 然而我並不明白怎麼要這樣算 不是應該是 w * h / inch ？？？？？
複製**
具備足夠高畫素密度而使得人體肉眼無法分辨其中單獨畫素點的液晶屏螢幕尺寸不一樣的適配問題
模糊問題
1px 顯示問題
api不支援的相容問題
高畫質顯示
第三方元件庫相容問題
富文字顯示問題
前端**遷移單位不一致問題
存在問題
// vue指令
// 1. 先獲取dpr 2獲取每個文件物件的字型大小 乘以dpr
vue.directive('richtext', (el, binding) =>
if (dom.childnodes.length > 0) }}
f(el)
})})// 使用方法
.richtext(v-html="content" v-richtext='')
複製**
參考設定html根font-size的值 // 設計稿 750 * 1334
html
@media (min-width: 560px)
}@media (max-width: 1024px)
}複製**
.border-bottom
}}// only操作符僅在**查詢匹配成功的情況下被用於應用乙個樣式，這對於防止讓選中的樣式在老式瀏覽器中被應用到
// -webkit-device-pixel-ratio 是乙個非標準的布林型別css**型別，是標準
// resolution **型別的乙個替代方案.
複製**
方法一：postcss-px2rem(vue-cli3)
這裡不推薦 因為px2rem: 寫px時需要加上 /*no*/ 感覺比較麻煩
const px2rem = require('postcss-px2rem')
const postcsspx2rem = new px2rem()
css: ,}},
複製**
除不盡的問題 （calc） 涉及到相容問題
開發方便
利用vw rem實現移動web適配布局
px css pixels emex,ch remvw,vh 百分比rem 和 vw 相容對比 mdn那麼什麼是裝置的物理畫素？ppi pixel per inch 公式 w 橫向pixel h 縱向pixel inch 螢幕尺寸 ppi math.sqrt w w h h inch console...
css3vw適配 使用vw rem實現移動端適配
利用視口單位實現適配布局 響應式布局的實現依靠 查詢 media queries 來實現，選取主流裝置寬度尺寸作為斷點針對性寫額外的樣式進行適配，但這樣做會比較麻煩，只能在選取的幾個主流裝置尺寸下呈現完美適配。即使使用rem方式來布局，也需要寫一段js 來動態改變根元素的大小。比較成熟的做法如手淘的...
利用rem實現web移動端螢幕適配 彈性布局
具體詳情請看tat.tennylv的文章 1.rem單位根據html根元素的字型大小 px為單位 進行設定，html預設的字型大小為16px，這時候1 rem 16 px。設定html字型為35px,則1 rem 35 px 2.我們可以對螢幕中的各元素使用rem設定大小。如div 1 rem 此時...