Web前端面试指导(四十四):什么是响应式开发?
2016-10-18 21:48
911 查看
题目点评
响应式开发是前端开发工作比较常见的工作内容,随着移动端的发展,网页设计必须考虑到移动端的设计,同一个网站为了兼容PC端和移动端显示,响应式开发是前端开发人员必备的技术,所以响应式开发的技术必须掌握。什么是响应式
顾名思义,同一个网站兼容不同的大小的设备。如PC端、移动端(平板、横屏、竖排)的显示风格。需要用到的技术
1. Media Query(媒体查询)用于查询设备是否符合某一特定条件,这些特定条件包括屏幕尺寸,是否可触摸,屏幕精度,横屏竖屏等信息。
2. 使用em或rem做尺寸单位
用于文字大小的响应和弹性布局。
3. 禁止页面缩放
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />
4. 屏幕尺寸响应
a) 固定布局:页面居中,两边留白,他能适应大于某个值一定范围的宽度,但是如果太宽就会有很多留白,太窄会出现滚动条,在PC页面上很常见。
b) 流动布局:屏幕尺寸在一定范围内变化时,不改变模块布局,只改变模块尺寸比例。比固定布局更具响应能力,两边不留白,但是也只能适应有限的宽度变化范围,否则模块会被挤(拉)得不成样子。
c) 自定义布局:上面几种布局方式都无法跨域大尺寸变化,所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。
d) 栅格布局:这种布局方式使得模块之间非常容易对齐,易于模块位置的改变用于辅助自定义布局。
响应式设计注意事项
1.宽度不固定,可以使用百分比#head{width:100%;} #content{width:50%;}
2. 图片处理
图片的宽度和高度设置等比缩放,可以设置图片的width为百分比,height:auto;
背景图片可以使用background-size 指定背景图片的大小。
相关文章推荐
- Web前端面试指导(三十二):同步和异步有什么区别?
- Web前端面试指导(十二):::before 和:before有什么区别?
- Web前端面试指导(三十三):谈谈你对模块化开发的理解?
- Web前端面试指导(二十四):事件是什么?如何阻止事件冒泡?
- Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么?
- Web前端面试指导(二十八):什么是闭包,为什么要用它?
- Web前端面试指导(四十五):页面渲染原理是什么?
- Web前端面试指导(三十七):eval是做什么的?
- Web前端面试指导(二十九):Ajax 是什么? 如何创建一个Ajax?
- Web前端面试指导(二十六):JSON 格式是什么?你了解吗?
- Web前端面试指导(十二):::before 和:before有什么区别?
- Web前端面试指导(三十九):new操作符具体干了什么呢?
- Web前端面试指导(二十七):原型是什么?原型链是什么?
- 淘宝web前端开发岗面试经历及感悟
- web前端开发需要学习什么内容已经需要使用什么开发工具?
- 【转发】亲历腾讯WEB前端开发三轮面试经历及面试题
- 腾讯WEB前端开发三轮面试经历及面试题
- 2015腾讯暑期实习生 Web前端开发 面试经历
- 亲历腾讯WEB前端开发三轮面试经历及面试题
- 亲历腾讯WEB前端开发三轮面试经历及面试题