Px(CSS pixels)css
emhtml
ex, ch前端
remvue
vw,vhhtml5
百分比web
rem vue-cli
vw api
mdn瀏覽器
那麼什麼是設備的物理像素?bash
物理像素(physical pixel):設備能控制顯示的最小單位。設備獨立像素(DIP,device-independent pixel,density-independent pixel):獨立於設備的用於邏輯上衡量像素的單位
對於前端來講,能夠理解成在設備上能設置的最小值。如在dpr = 1 最小值1px; dpr = 2 最小值爲0.5px
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) => {
Vue.nextTick(() => {
let dpr = document.querySelector('html').getAttribute('data-dpr')
let f = (dom) => {
let fontPx = dom.style && dom.style.fontSize
if (fontPx) {
fontPx = fontPx.substr(0, fontPx.length - 2) * parseInt(dpr)
dom.style.fontSize = fontPx + 'px'
}
if (dom.childNodes.length > 0) {
for (let i = 0; i < dom.childNodes.length; i++) {
f(dom.childNodes[i])
}
}
}
f(el)
})
})
// 使用方法
.richtext(v-html="content" v-richtext='')
複製代碼
三、高清方案存在的誤區 dpr越高越清晰 是源自設備自己和縮放關係不大或者說當dpr爲1時清晰度已經足夠了,不須要再經過縮放來是網頁顯示更清晰(實踐總結,未找到資料支持) 四、兼容問題 juejin.im/post/5b9cb9…
設置html根font-size的值 // 設計稿 750 * 1334
html {
height: 100%;
font-size: 50px; // 向下兼容 不止vw時候 寫死font-size
font-size: 13.33333333vw; // 7.5rem === 100vw
margin: 0 auto;
}
@media (min-width: 560px) { // pc兼容
html,body {
font-size: 54px;
max-width: 540px;
}
}
@media (max-width: 1024px) { // ipad兼容:ipad最大1024px
html,body {
max-width: 1024px;
}
}
複製代碼
1px顯示問題 物理像素 dpr>=2 取2倍
.border-bottom {
position: relative;
&::after {
content: '';
position: absolute;
z-index: 1;
pointer-events: none;
background-color: red;
height: 1px;
left: 0;
right: 0;
bottom: 0;
@media only screen and (min-resolution: 2dppx) { // 非標準的
-webkit-transform: scaleY(0.5);
-webkit-transform-origin: 50% 0%;
}
}
}
// only操做符僅在媒體查詢匹配成功的狀況下被用於應用一個樣式,這對於防止讓選中的樣式在老式瀏覽器中被應用到
// -webkit-device-pixel-ratio 是一個非標準的布爾類型CSS媒體類型,是標準
// resolution 媒體類型的一個替代方案.
複製代碼
單位要怎麼寫
方法一:postcss-px2rem(vue-cli3)
這裏不推薦 由於px2rem: 寫px時須要加上 /*no*/ 感受比較麻煩
const px2rem = require('postcss-px2rem')
const postcssPx2rem = new px2rem({
remUnit: 50 // 基準大小
})
css: {
loaderOptions: {
postcss: {
plugins: [postcssPx2rem]
},
}
},
複製代碼
方法二:目前方案是直接寫 7.5rem=100vw 設計稿除以100便可
方法三:px2rem的編輯器插件如vscode的cssrem
除不盡的問題 (calc) 涉及到兼容問題