题目点评

响应式开发是前端开发工作比较常见的工作内容，随着移动端的发展，网页设计必须考虑到移动端的设计，同一个网站为了兼容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前端面试指导(三十九)：new操作符具体干了什么呢?
题目点评考察对new关键的深刻认识,是否对前端知识有专研,如果没有专研的人,肯定说创建了一个对象,恭喜你面试官知道你是小菜鸟来的,这次面试基本上没有太大的希望了.一定要对new过程的4个步骤非常清楚 ...
Web前端面试指导(完结)
首先感谢网友对我的关注,对智学无忧的关注!历经个多月,终于将web前端面试指导的课程全部更新完毕!希望对学习前端和面试前端的同学有帮助.智学无忧祝大家前程无忧! 面试真题学习地址 1. Web前端面 ...
Web前端面试指导(二)：编写简历，吃透简历内容
2.1 简历模板(仅供参考,不得千篇一律) ~~~~~~温馨提示 ~~~~~~ 简历模板文件在QQ群 490916635 2.2 吃透简历内容 2.2.1 吃透自己的简历 Ø 简历出现的名词 ...
Web前端面试指导(十四)：如何居中一个元素（正常、绝对定位、浮动元素）?
题目点评这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要 ...
Web前端面试指导四十 CSS3有哪些新特性
首先给大家分享一个巨牛巨牛的人工智能教程,是我无意中发现的.教程不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵段子,像看小说一样,哈哈-我正在学习中,觉得太牛了,所以分享给大家!点这里可以跳转 ...
Web前端面试指导(四十)：CSS3有哪些新特性？
题目点评 CSS3的特性那么多该从哪里说起了?很显然这道题目是有陷阱的,你不可能将所有的特性一个不漏的说出来,就算你说出来,别人还认为你是背的了!所以你主要讲一下在项目中经常用到的Css3的属性就可以 ...
Web前端面试指导四面试前准备-有备而去百战百胜
首先给大家分享一个巨牛巨牛的人工智能教程,是我无意中发现的.教程不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵段子,像看小说一样,哈哈-我正在学习中,觉得太牛了,所以分享给大家!点这里可以跳转 ...
Web前端面试指导(十八)：用纯CSS创建一个三角形的原理是什么？
题目点评三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单转载于:https://blog.51cto ...
Web前端面试指导(五)：掌握面试技巧，让面试变得轻松
5.1 面试形式 1) 一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2) 面试官喜欢什么样的人 ü 技术好.自信.谦虚.善于沟通.表达. ü 喜欢 ...

Web前端面试指导(四十四)：什么是响应式开发？

题目点评

什么是响应式

需要用到的技术

响应式设计注意事项

Web前端面试指导(四十四)：什么是响应式开发？相关推荐

最新文章

热门文章