移动web

pc端网页和移动端网页有什么不同

pc屏幕大，网页固定版心

手机屏幕小，网页宽度为100%

如何在电脑里边写代码边调试移动端网页效果

谷歌模拟器

移动分辨率的特点

屏幕尺寸是指屏幕对角线的长度，一般用英寸来度量例：3.5 4.7 5.5

pc分辨率：例：1920*1080； 1366*768

分辨率越高越好

物理分辨率：出厂设置的，不可更改的

逻辑分辨率：自己设置的

写代码参考逻辑分辨率

了解移动端主流设备分辨率

iPhone6/7/8 物理分辨率：750*1334 逻辑分辨率：375*667 比例关系2：1

使用meta视口标签 能够让网页宽度和移动设备宽度分辨率相同

在默认情况下：网页的宽度和逻辑分辨率相同吗：不相同

<meta name="viewport" content="width=device-width", initial-scale=1.0>

网页宽度默认是980px html默认宽度和电脑分辨率一致，不是具体的数字

一般参考iPhone出设计稿或者写代码，然后去适配其他的移动设备

百分比布局，也叫流式布局，效果：宽度自适应，高度固定

flex布局/弹性布局

是一种浏览器提倡的布局模型，布局网页更简单灵活 避免浮动脱标的问题

float 使用来解决文字浮于图片的问题

flex是用来发明出来解决盒子左右布局的问题的 所以flex是有兼容性的，但是不用太担心，移动端都适配，现在的网页也都适配，而且也没有脱标的问题，pc端的话需要和产品经理沟通好，caniuse.com

技术与兼容性的问题

flex非常适合结构化布局 设置方式：父元素添加display：flex；

父级：弹性容器

子级：弹性盒子

默认主轴在水平 侧轴在垂直 交叉轴

主轴排列方式

justify-content：1，center：中间的盒子没有距离，合在一起居中

2，space-between：只在子级之间有间距

3，space-evenly：所有地方的间距都相等

4，space-around：自己之间的间距是父级与子级之间距离的二倍

5，flex-start：靠右排

6，flex-end：靠左排

侧轴排列方式

align-items：

1，flex-start：靠上排

2，flex-end：靠下排

3，center：