移動(dòng)端分辨率
移動(dòng)端設(shè)計(jì)時(shí)參考的分辨率一般為：320* 568, 375* 667, 414* 736
em和rem的區(qū)別
- PX是像素單位澎羞，在同一個(gè)瀏覽器分辨率下一經(jīng)設(shè)定就是固定的值。
- em和rem區(qū)別于PX 它們都是可擴(kuò)展單位 區(qū)別在于對(duì)應(yīng)參照物字體大小不同 解析成PX時(shí)的大小不一樣椒功。
- 當(dāng)使用 rem 單位栏豺，他們轉(zhuǎn)化為像素大小取決于頁(yè)根元素（html）的字體大小， 根元素字體大小乘以 rem 值。
<script> document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 40 + "px";</script>
html{
font-size: 14px;
}
div{
width:10rem;
}
// div的width解析后 width:140px;
- 當(dāng)使用em單位時(shí)鹉梨，像素值將是em值乘以當(dāng)前元素的父級(jí)元素父級(jí)的字體大小， 父元素字體大小乘以 em 值未状。
<div class="div1">
<div class="div2">
這是em
</div>
</div>
html{
font-size: 14px;
}
.div1{
font-size: 16px;
}
.div2{
width: 10em;
}
// div2的width解析后 width:160px;
移動(dòng)端適配方案之[postcss-px-to-viewport]
postcss-px-to-viewport俯画，將px單位自動(dòng)轉(zhuǎn)換成viewport單位
npm install postcss-px-to-viewport --save-dev
引入vue項(xiàng)目，再postcss.config.js引入
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
viewportWidth: 750, // 視窗的寬度司草，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的寬度艰垂，一般是750
viewportHeight: 1334, // 視窗的高度，根據(jù)750設(shè)備的寬度來(lái)指定埋虹，一般指定1334猜憎，也可以不配置
unitPrecision: 3, // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)
viewportUnit: "vw", //指定需要轉(zhuǎn)換成的視窗單位，建議使用vw
selectorBlackList: ['.ignore'],// 指定不轉(zhuǎn)換為視窗單位的類(lèi)搔课，可以自定義胰柑，可以無(wú)限添加,建議定義一至兩個(gè)通用的類(lèi)名
minPixelValue: 1, // 小于或等于`1px`不轉(zhuǎn)換為視窗單位，你也可以設(shè)置為你想要的值
mediaQuery: false // 允許在媒體查詢(xún)中轉(zhuǎn)換`px`
}
}
}
布局方法
- 選擇一個(gè)分辨率作為參考, 其他分辨率參考該分辨率做適配
// 屏幕適配（ window.screen.width / 移動(dòng)端設(shè)計(jì)稿寬 * 100）也即是 (window.screen.width / 750 * 100) ——*100 為了方便計(jì)算爬泥。即 font-size 值是手機(jī) deviceWidth 與設(shè)計(jì)稿比值的 100 倍
document.getElementsByTagName('html')[0].style.fontSize = window.screen.width / 7.5 + 'px';
// 或者
// rem計(jì)算方式柬讨，適配rem.
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
doc.body.style.display = 'block';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
- 通過(guò)CSS 的 @media 響應(yīng)式 的根據(jù)不同的分辨率設(shè)置不同的樣式
注意：
1.寬度需要使用百分比
2.圖片處理 給圖片指定的最大寬度為百分比。如果圖片大了袍啡，就同比縮小踩官，如果圖片小了，就原尺寸輸出境输。
/** 指定iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
#head { … }
#content { … }
#footer { … }
}
/**指定 iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {
#head { … }
#content { … }
#footer { … }
}
/** 最大寬度**/
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}
- 通過(guò)自適應(yīng)100%蔗牡、box-flex、rem(相對(duì)于根目錄的字體大小來(lái)設(shè)置)
meta 標(biāo)簽
meta 標(biāo)簽的 viewport 標(biāo)記設(shè)置當(dāng)前顯示給用戶(hù)內(nèi)容的窗口拖動(dòng)和縮放
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale = 1.0,minimum-scale = 1.0,maximum-scale=1.0,target-densitydpi =device-dpi">
常用的屬性有
width 和height 分別指定視區(qū)的邏輯寬度和高度, width可以是像素或者device-width(當(dāng)前屏幕寬度)
initial-scale 設(shè)置頁(yè)面的初始縮放比例, 一般不縮放設(shè)置為1.0
user-scalable 用戶(hù)是否可以縮放視區(qū) yes/no
viewport 除此之外還有以下屬性
device-dpi 設(shè)備默認(rèn)的像素密度
high-dpi 高像素密度
medium-dpi 中等的像素密度
low-dpi 低像素密度
設(shè)置根目錄字體大小
設(shè)置根目錄字體大小為當(dāng)前屏幕寬度的1/3倍, 可根據(jù)需求自定義
這有一個(gè)好處就是, 可以固定所有標(biāo)簽的width或者height等數(shù)量屬性為固定的多少像素(PX), 瀏覽器會(huì)根據(jù)屏幕寬度按1/3的比例動(dòng)態(tài)改變, 類(lèi)似于使用百分比布局(width:100%),但是個(gè)人認(rèn)為使用px為單位更方便布局
document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth/3 + "px";
<script> document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 40 + "px";</script>
此外移動(dòng)端布局還涉及到
- Android和IOS的兼容性問(wèn)題(背景圖片定位,瀏覽器兼容)
- 移動(dòng)端UI框架(jquery weui)
- 布局(flex,div)
// 標(biāo)簽瀏覽器兼容代碼
@charset "utf-8";
body, button, input, select, textarea {
font: 12px/1.125 Arial, Helvetica, sans-serif
}
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
margin: 0;
padding: 0
}
table {
border-collapse: collapse;
border-spacing: 0
}
li {
list-style: none
}
fieldset, img {
border: 0
}
q:after, q:before {
content: ''
}
input, textarea {
outline-style: none
}
input[type=text], input[type=password], textarea {
outline-style: none;
-webkit-appearance: none
}
textarea {
resize: none
}
address, caption, cite, code, dfn, em, i, th, var {
font-style: normal;
font-weight: 400
}
legend {
color: #000
}
abbr, acronym {
border: 0;
font-variant: normal
}
a, u {
text-decoration: none
}
a:hover {
text-decoration: underline
}
以下參考大神的做法,動(dòng)態(tài)修改body 的font-size
開(kāi)發(fā)原則：文字流式嗅剖，控件彈性辩越，圖片等比縮放。
設(shè)計(jì)稿豎直放時(shí)的橫向分辨率為640px信粮，為了計(jì)算方便黔攒，取一個(gè)100px的font-size為參照，那么body元素的寬度就可以設(shè)置為width: 6.4rem，于是html的font-size=deviceWidth / 6.4亏钩。這個(gè)deviceWidth就是viewport設(shè)置中的那個(gè)deviceWidth莲绰。
這個(gè)deviceWidth通過(guò)document.documentElement.clientWidth就能取到了，所以當(dāng)頁(yè)面的dom ready后姑丑，做的第一件事情就是：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
這個(gè)6.4怎么來(lái)的蛤签，當(dāng)然是根據(jù)設(shè)計(jì)稿的橫向分辨率/100得來(lái)的。
如果設(shè)計(jì)稿基于iphone6栅哀，橫向分辨率為750震肮，body的width為750 / 100 = 7.5rem
如果設(shè)計(jì)稿基于iphone4/5，橫向分辨率為640留拾，body的width為640 / 100 = 6.4rem
當(dāng)deviceWidth大于640時(shí)戳晌，則物理分辨率大于1280（這就看設(shè)備的devicePixelRatio這個(gè)值了），應(yīng)該去訪(fǎng)問(wèn)pc網(wǎng)站了痴柔。
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
//使用了less和sass這樣的css處理器
//定義一個(gè)變量和一個(gè)mixin@baseFontSize: 75;//基于視覺(jué)稿橫屏尺寸/100得出的基準(zhǔn)font-size
.px2rem(@name, @px){
@{name}: @px / @baseFontSize * 1rem;
}
//使用示例：
.container {
.px2rem(height, 240);
}
//less翻譯結(jié)果：
.container {
height: 3.2rem;
}
如何與設(shè)計(jì)協(xié)作
第一步沦偎，視覺(jué)設(shè)計(jì)階段，設(shè)計(jì)師按寬度750px（iphone 6）做設(shè)計(jì)稿咳蔚，除圖片外所有設(shè)計(jì)元素用矢量路徑來(lái)做豪嚎。設(shè)計(jì)定稿后在750px的設(shè)計(jì)稿上做標(biāo)注，輸出標(biāo)注圖谈火。同時(shí)等比放大1.5倍生成寬度1125px的設(shè)計(jì)稿侈询，在1125px的稿子里切圖。
第二步糯耍，輸出兩個(gè)交付物給開(kāi)發(fā)工程師：一個(gè)是程序用到的@3x切圖資源扔字，另一個(gè)是寬度750px的設(shè)計(jì)標(biāo)注圖。
第三步温技，開(kāi)發(fā)工程師拿到750px標(biāo)注圖和@3x切圖資源革为，完成iPhone 6（375pt）的界面開(kāi)發(fā)。此階段不能用固定寬度的方式開(kāi)發(fā)界面舵鳞，得用自動(dòng)布局（auto layout）篷角，方便后續(xù)適配到其它尺寸。
第四步系任，適配調(diào)試階段，基于iPhone 6的界面效果虐块，分別向上向下調(diào)試iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果俩滥。由此完成大中小三屏適配。
