什么是响应式开发？

响应式开发是前端开发工作比较常见的工作内容，随着移动端的发展，网页设计必须考虑到移动端的设计，同一个网站为了兼容PC端和移动端显示，响应式开发是前端开发人员必备的技术，所以响应式开发的技术必须掌握。

什么是响应式

顾名思义，同一个网站兼容不同的大小的设备。如PC端、移动端（平板、横屏、竖排）的显示风格。

1. Media Query（媒体查询）

<media=”screenand(max-device-width:400px)” href=”tinyScreen.css”/>

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

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

3. 禁止页面缩放

1. <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />  

4. 屏幕尺寸响应

a)  固定布局：页面居中，两边留白，他能适应大于某个值一定范围的宽度，但是如果太宽就会有很多留白，太窄会出现滚动条，在PC页面上很常见。

b)  流动布局：屏幕尺寸在一定范围内变化时，不改变模块布局，只改变模块尺寸比例。比固定布局更具响应能力，两边不留白，但是也只能适应有限的宽度变化范围，否则模块会被挤（拉）得不成样子。

c)  自定义布局：上面几种布局方式都无法跨域大尺寸变化，所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。

d)  栅格布局：这种布局方式使得模块之间非常容易对齐，易于模块位置的改变用于辅助自定义布局。

5、不使用绝对宽度

转载于:https://www.cnblogs.com/xiaoan0705/p/8612317.html