移动端布局

一、 pixel  移动开发像素

移动端

640*1136图能否在phone5上置满？

逻辑像素：px，浏览器使用

无关像素（物理像素）：dp,pt；设备无关，是多大就显示多大

设备像素缩放比：dpr,结合两者

维度：1px=2*dp

DPI:打印机每寸喷点

PPI:单位英寸内像素密度

以上两种相同

     ppi越高，像素越高，图像越清晰

retina屏幕

ldpi：120   0.75；

mdpi:160    1.0;

hdpi：240  1.5；

xhdpi:320    2.0;

p6-----------3.0;

二、viewport

pc在移动端展示？

viewport我理解为手机、电脑视图的对接

通过两个屏幕

一个是窗口的屏幕 布局排版

一个是手机的屏幕 缩放展示

980px的窗口不规范，用户体验不好

通过设置meta标签

例子：

最佳设置

固定布局

弊端

换移动设备不能跟着变

所以可以用flex弹性盒子布局

-------------------------------------------------------

flex弹性盒子布局

属性

排列方式flex-direction

是否换行flex-wrap

以上两点简写：flex-flow

**************************************

子元素横向排版：flex-content

子元素自己排版：align-self

父元素设子元素：align-items

子元素换行方式：align-content

排序：order

但是！flex有兼容性问题

----------------------------------------------------------

响应式设计

pc端、移动端所有的设备都能够展示

核心逻辑是 媒体查询

相对应的设备宽度 做出不同的调整

特殊处理

图片