我的筆記分辨率 2560*1600 比例16:10 , 設(shè)備尺寸16吋
默認dpi (像素密度)如圖 紅框中顯示
當(dāng)設(shè)備的分辨率和設(shè)備尺寸不變的情況下，設(shè)備屏幕dpi（像素密度）在高于某個值的時候。屏幕的dpi(像素密度)就會影響網(wǎng)頁縮放（從而影響網(wǎng)頁布局）訪問此地址查看電腦屏幕當(dāng)前分辨率和使用的dpi https://www.mydevice.io/
以win10為例 調(diào)整dpi
在分辨率不變，且屏幕比例不變（16:10）的情況下 改變屏幕的縮放比例（dpi）會將屏幕的分辨率改變且影響網(wǎng)頁中的 元素寬度以及字體大小等。導(dǎo)致網(wǎng)頁布局出現(xiàn)問題
如使用的設(shè)備比例不變（16:9） 或 （16:10）這兩種在當(dāng)下比較常見的 網(wǎng)頁只需要按照此比例的設(shè)計稿還原即可。即便用在4K 或 更大分辨率的顯示器上，系統(tǒng)（win或mac）會自動設(shè)置縮放比例。網(wǎng)頁也可達到一個比較好的瀏覽效果
以上的方式較為適用于 甲方固定的使用場景 如大屏 如 某個信息系統(tǒng) 因為他們的設(shè)備多為統(tǒng)一采購。保證硬件統(tǒng)一性即可。 大屏也可一開始設(shè)置為大屏的真實分辨率，網(wǎng)頁開發(fā)直接將字體或元素尺寸寫大，不使用系統(tǒng)的自動縮放（但此時應(yīng)該關(guān)閉系統(tǒng)的自動縮放）看取舍吧
如果是一般性網(wǎng)頁 要給用戶使用（比如電腦和手機或Ipad訪問） 這時候不僅要考慮分辨率不變 縮放（dpi）變化帶來的影響 還要考慮 縮放（dpi）不變 分辨率變化帶來的影響 。一般采用 媒體查詢+js設(shè)置字體rem的方式來實現(xiàn)
媒體查詢中又分為 分辨率的媒體查詢
css設(shè)置分辨率區(qū)間改變HTML布局達到兼容
@media screen and (min-width: 990px/*起始最小寬度*/) and (max-width:1200px/*結(jié)束最大寬度*/){
/*樣式書寫處*/
}
和 dpi（像素密度或者屏幕縮放）媒體查詢
@media screen and (min-resolution: 1.25dppx), /*通用像素密度*/(min-device-pixel-ratio: 1.25),
/*安卓ios使用谷歌火狐瀏覽器也可
使用*/
(min-resolution: 115dpi) /*IE 要使用 dpi單位 google的dppx不支持*/
{
/*樣式書寫處*/
}
一 JS解決方案
/**
* 該方法是以iPhone6（真機寬度：375）對于設(shè)計稿web寬度（750）來計算rem
* 其他元素px值轉(zhuǎn)換為rem則使用：rem=px/100
*/
function setRem () {
// 375 默認大小16px
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
// 得到html的Dom元素
const htmlDom = document.getElementsByTagName('html')[0]
// 設(shè)置根元素字體大小
const standardFontSize = (htmlWidth / 7.5)
htmlDom.style.fontSize = standardFontSize + 'px'
}
// 初始化
setRem()
二 設(shè)置CSS 媒體查詢 相對來說網(wǎng)頁元素或組件要有比較好的通用性，修改起來才比較方便
分辨率改變的操作
css設(shè)置分辨率區(qū)間改變HTML布局達到兼容
@media screen and (min-width: 990px/*起始最小寬度*/) and (max-width:1200px/*結(jié)束最大寬度*/){
/*樣式書寫處*/
}
dpi（像素密度或者屏幕縮放）改變的操作
@media screen and (min-resolution: 1.25dppx), /*通用像素密度*/(min-device-pixel-ratio: 1.25),
/*安卓ios使用谷歌火狐瀏覽器也可
使用*/
(min-resolution: 115dpi) /*IE 要使用 dpi單位 google的dppx不支持*/
{
/*樣式書寫處*/
}
## 示例DEMO / 同分辨率下不同 dpi下處理
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--響應(yīng)式網(wǎng)頁 必備meta標(biāo)簽-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hh {
font-size: 16px;
background-color: rgb(255, 101, 101);
width: 500px;
}
/*像素密度計算網(wǎng)站 http://dpi.lv*/
/*獲取當(dāng)前設(shè)備的像素密度 https://bjango.com/articles/min-device-pixelratio/*/
@media screen and (min-resolution: 1.25dppx/*通用像素密度*/),(min-devicepixel-ratio: 1.25/*谷歌或安卓或ios使用*/),
(min-resolution: 115dpi/*萬惡的IE*/)
{
.hh {
font-size: 30px;
background-color: rgb(255, 108, 108)
}
}
</style>
</head>
<body>
<p class="hh"> 這是測試文字</p>
</body>
</html>
dpi放大倍率為1時效果
請注意下方網(wǎng)頁UI字體大小 及柱狀圖下方文字菜單數(shù)量 以及 柱狀圖左側(cè)Y軸數(shù)值
上方紅線處是測試當(dāng)前屏幕dpi 的放大倍數(shù) (與windows 縮放與布局處一直 100%等于此處的 1 具體請看文檔開頭)
聯(lián)系客服
