移動端屏幕適配問題

時間 2019-11-09

標籤移動屏幕適配問題欄目無線简体版

原文原文鏈接

爲了作移動適配，css3出了一個新單位rem，rem就是相對於根元素<html>的font-size來作計算，根目錄通常用20px（一是方便計算，二是谷歌瀏覽器不支持12px如下的字體）；css

html{font-size：20px}，默認爲20px；html

@media only screen and (max-width: 1220px) and (min-width: 992px){
html{
　　font-size: 50px;
　}
}ios

意思就是屏幕的尺寸在992px和1220px範圍內html的字體大小就採用50px；根據實際狀況觸類旁通列出主流的屏幕尺寸就能夠，若是以爲不夠嚴謹就能夠用js動態設置html的字體大小；css3

<script>web

　　document.getElementsByTagName('html')[0].style.fontSize=window.innerWidth/10+'px';瀏覽器

</script>sass

10也能夠換作其餘，取10是爲了方便計算；less

若是以爲單位換算麻煩，能夠採用less或者sass等預處理器去完成；固然，單位方面也能夠採用vw或vh去進行計算，1vw就是屏幕寬度的1%；1vh就是屏幕高度的1%；ide

佈局方面能夠用flex佈局；佈局

移動開發經常出現的幾個問題及解決辦法：

一：高清圖片處理

img 100px *100px

高清屏 200dp*200dp 渲染模糊，dpr=2的狀況下

解決辦法 50px *50px 獲得正確結果

二：一像素邊框

一樣是高清屏下的問題，根本緣由是1px使用2dp來渲染

border：0.5px 這種寫法僅在ios8能夠起做用；

解決方案：

.sidebar .folder li{position:relative}

.folder li+li:before{

　　position:absolute;

　　top:-1px;

　　left:0;

　　content:'';

　　width:100%;

　　height:1px;

　　border-top:1px solid #ddd;

　　-webkit-transform:scaleY(0.5);

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。