临时抱佛脚版_移动端适配布局_flex+rem+响应式

移动端的常见布局方案

文章目录
移动端的常见布局方案
一. 移动端和PC端的区别？
  2. 手机屏幕的现状
  2.1 视口
  2.2 布局视口 layout viewport
  2.2视觉视口 visual viewport
  2.3理想视口 ideal viewport
  3. 移动端技术解决方案
  3.1移动端公共样式
  3.2移动端特殊样式
二. 移动web开发——flex布局
  1 . 传统布局和flex布局对比
  1.1传统布局
  1.2 flex布局
  1.3 建议
  2.0 flex布局原理
  3.0 父项常见属性
  3.1 flex-direction设置主轴的方向
  3.2 justify-content 设置主轴上的子元素排列方式
  3.3 flex-wrap设置是否换行
  3.4 align-items 设置侧轴上的子元素排列方式（单行 ）
  3.5 align-content 设置侧轴上的子元素的排列方式（多行）
  3.6 align-content 和align-items区别
  3.7 flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
  4.0 flex布局子项常见属性
  4.1 flex 属性
  4.2 align-self控制子项自己在侧轴上的排列方式
  4.3 order 属性定义项目的排列顺序
三. 移动web开发之rem布局
  rem基础
  rem单位
  媒体查询
  什么是媒体查询
  媒体查询语法规范
  less 基础
  维护css弊端
  Less 介绍
四.响应式布局(暂时没学懂)

一. 移动端和PC端的区别？

（1）PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。

（2）在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件。 另外包括移动端弹出的手机键盘的处理，这样的问题在PC端都是遇不到的。

（3）在布局上，移动端开发一般是要做到布局自适应的，我使用的一直是rem布局，感觉很好。

（4）在动画处理上，PC端由于要考虑IE的兼容性，所以通常使用JS做动画的通用性会更好一些，但是CSS3做了很大的牺牲， 而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3， 既简单、效率又高。

2. 手机屏幕的现状

• 移动端设备屏幕尺寸非常多，碎片化严重。
• Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。
• 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
• 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。

2.1 视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口。

2.2 布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

2.2视觉视口 visual viewport

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

2.3理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口，对设备来讲，是最理想的视口尺寸

需要手动添写meta视口标签通知浏览器操作

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

<meta name="viewport"