响应式前端开发技术与布局策略分析.pdfVIP

题目

响应式开发剖析

什么是响应式

顾名思义，同一个兼容不同的大小的设备。如PC端、移动端（平板、横

屏、竖排）的显示风格。

需要用到的技术

1.MediaQuery（查询）

用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸，是否可触

摸，屏幕精度，横屏竖屏等信息。

2.使用em或rem做尺寸单位

用于文字大小的响应和弹性布局。

3.页面缩放

metaname=viewportcontent=initial-scale=1,

width=device-width,um-scale=1,user-scalable=no/

4.屏幕尺寸响应

a)固定布局：页面居中，两边留白，他能适应大于某个值一定范围的宽度，但

是如果太宽就会有很多留白，太窄会出现滚动条，在PC页面上很常见。

b)流动布局：屏幕尺寸在一定范围内变化时，不改变模块布局，只改变模块尺寸

比例。比固定布局更具响应能力，两边不留白，但是也只能适应有限的宽度变化

范围，否则模块会被挤（拉）得不成样子。

c)自定义布局：上面几种布局方式都无法跨域大尺寸变化，所以适当时候我们需

要改变模块的位置排列或者隐藏一些次要元素。

d)栅格布局：这种布局方式使得