移动端布局

[Aran.Hu]

移动端布局方案简单整理

重点整理移动端布局的合理性；

基于设计师给的设计稿，在不同dpr/dip设备上的实现效果

一些基础知识

视口

/	浏览器	移动端
视口	视口的宽度就等于浏览器窗口的宽度	同 「布局视口」 视口与移动端浏览器的宽度不再相关联，而是完全独立的了。我们称它为布局视口---css布局会根据它来计算，并被它约束
布局视口	浏览器窗口	在Safari iPhone中布局视窗的宽为980px，在Opera中布局视窗宽为850px ，在Android WebKit 中而已视窗宽为800px document.documentElement.clientWidth document.documentElement.clientHeight
视觉视口	浏览器窗口	它是用户正在看到的网站的区域。用户可以通过缩放来操作视觉视口，同时不会影响布局视口，布局视口仍保持原来的宽度, 这个缩放的影响还要弄下 window.innerWidth window.innerHeight
理想视口	无	最理想的布局视口尺寸。 理想窗口的尺寸是由浏览器厂商决定的，同一设备可以有不同的尺寸 不同设备的相同浏览器理想窗口也会不同，比如手机和平板 会随着设备转向改变 <meta name="viewport" content="width=device-width">
总结		桌面中浏览器窗口就是约束你的css布局窗口，它也决定用户可以看到什么 在手机上，桌面窗口被拆分成了两个：布局视口会限制你的CSS布局；视觉视口决定用户能看到什么 移动端浏览器还有一个理想视口，它是对于特定设备上的特定浏览器的布局视口的一个理想尺寸 可以把布局视口的尺寸设置为理想视口。实际上，这就是响应式设计的基础 理想视口，它是对设备来说最理想的布局视口尺寸。显示在理想视口中的网页拥有最理想的浏览和阅读的宽度，用户刚进入页面时不再需要缩放。

缩放

• 手机上放大，视觉视口缩小，布局视口不变，所以我们看到的css布局是不变的。要例子
• 桌面上放大，视觉视口缩小，由于桌面的布局视口和视觉视口是相同的，所以布局视口也变小，这就是我们在桌面端缩放的时候样式有时候会错乱的原因。
• CSS像素与 dip 的比例即为网页的缩放比例，如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑/独立像素）。这里说的对，CSS像素不一定等于dip像素，如果缩放两者就不一样啦；
• 手指缩放

initial-scale

例子: initial-scale=1 => 640/320 = 2 ; initial-scale = 2; 640/160 = 4;
所以更改的是dip

px 分为设备像素和CSS像素

讲的不错

但上面文章有个问题，需要实践 就是占用1/3的那个；应该还是gen

• 设备像素 表示屏幕上可以铺多少个点点 不同设备上的点点可能不一样
• CSS 1个CSS像素在不同设备上可能对应不同的物理像素数，这个比值是设备的属性（Device Pixel Ratio(dpr)，设备像素比）;是个相对单位 比如iPhone5使用的是Retina视网膜屏幕，用2x2的Device Pixel代表1x1的CSS Pixel，所以设备像素数为640x1136px，而CSS逻辑像素数为320x568px;
• 1px 的CSS像素 在不同dpr设备上的渲染宽度是一致的吗？？？在同样的dip设备上的应该是一样的。
• screen.width 获取的是设备独立像素宽度，不能直接获得设备物理像素
• 二者相等条件
  • PC端默认情况下(没有被缩放)，一个物理像素 = 一个设备独立像素
  • 移动端 和标准PPI一样的 也就是dpr=1的时候是相等的

这的图可以自己画一个

<img src="https://raw.githubusercontent.com/naivehhr/blog/master/asset/viewport-3.png"  width="500" />

dip(dp)

设备独立像素 独立于设备的用于逻辑上衡量长度的单位，由底层系统的程序使用，会由相关系统转换为物理像素。就是相对物理像素而言；比如4s上一个设备独立像素换算成2个物理像素；（其实就是CSS像素，只不过在android中叫做dip）

dpr

设备像素比 设备像素和理想视口的比值 例: iphone4 dpr=640/320(理想视口宽度)=2
设备像素比 = 设备像素/设备独立像素 // 在某一方向上，x方向或者y方向 1

js通过window.devicePixelRatio, css通过device-pixel-ratio(基于webkit)来获取。
DPR也是浏览器厂商决定的，所以也有很多种，并不一定都为整数；ddpx window.devicePixelRatio和媒体查询的device-pixel-ratio，单位是ddpx:
每一个像素的点数，但是实际上不允许使用单位的，所以下面是正确的写法：

if(window.devicePixelRatio >=2){
    // DPR大于等于2时生效
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
    // DPR大于等于2时生效
}

// e11及以下不支持ddpx，所以必须要用dpi来表示。由于1英寸对应了CSS中的96个像素，所以1ddpx等于96dpi, 就有了如下写法
@media all and ((-webkit-min-device-pixel-ratio: 2),
                (min-resolution: 192dpi)) {
    // DPR大于等于2时生效
}

dpi 物理分辨率 像素数量/宽度(英寸) 例: iphone4 dpi=640/320=2

分辨率查询

Device	Width x Height dp	Width x Height px
iphone4	320 x 480 dp	640 x 960 px

ppi 像素密度

一英寸长度包含的像素数量

// 屏幕对角线的像素尺寸 / 物理尺寸（inch）
Math.sqrt(750*750 + 1334*1334) / 4.7 = 326ppi 

分辨率

• 对于屏幕 物理像素总和 iPhone6屏幕分辨率是750px x 1334px
• 图像 图像的尺寸 图片显示出来我们看到的尺寸由屏幕像素密度决定，像素密度越高，图片看起来越小；在浏览器推荐的分辨率下(即dpr=1)时css 1px 由一个物理像素渲染，物理像素越密集，css 1px 看起来就越小；反之，如果物理像素分散或调整的分辨率低，则绘制出来的图片就大(原本1080物理像素设备，1080的独立像素，现在变成540独立像素,说明1px独立像素需要2个物理像素来绘制也就是1 css 像素，在屏幕上宽跨越的物理尺寸就变大了一倍)，图片是由一个一个色块组成的，如果变的太大，我们就能看到缝隙，感觉模糊,这是因为如果物理像素不能准确渲染出来，旁边的像素就会去近似值这个是算法定的 这个链接可以做PPT素材用 https://zhuanlan.zhihu.com/p/34988701
• 这个也没讲清楚
• 可以再看看这个 分辨率小知识

几倍图的问题

rem

1rem等于html根元素设定的font-size的px值 http://caibaojian.com/rem-and-px.html

	px  | rem 
	------------- | -------------
	12  | 12/16 = .75
	14  | 14/16 = .875
	16  | 16/16 = 1 
	48  | 48/16 = 3 

vh and vw：

相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

• vw 1vw等于视口宽度的1% https://www.cnblogs.com/luxiaoxing/p/7544375.html
• vh 1vh等于视口高度的1%
• vmin 选取vw和vh中最小的那个
• vmax 选取vw和vh中最大的那个

浅析 flexible.js

http://caibaojian.com/flexible-js.html

vw/wh结合rem布局方案实现

一像素问题 话说这个问题还有么

合理方案 简单做个页面吧

[Aran.Hu]

https://www.quirksmode.org/mobile/viewports2.html