【前端面试】响应式布局总结(转)

响应式布局总结

本章主要分为以下几个部分

  • 正确理解响应式设计
  • 响应式设计的步骤
  • 响应式设计需要注意的问题
  • 响应式布局实现原理

第一:正确理解响应式布局

响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里。在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够兼容多个终端。

第二:响应式设计的步骤

当创建一个响应式网站,或者非响应式网站变成响应式的时候,首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局,页面固定宽度大小,我觉得这个对在座的各位没有任何难度。如果完成了非响应式那么我在去添加媒体查询(Media Query)和响应式代码。这种操作更容易实现响应式特性。

1.布局及设置meta标签

当你完成当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到标签之间。

大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- width=device-width :表示宽度是设备屏幕的宽度
    initial-scale=1.0:表示初始的缩放比例
    minimum-scale=0.5:表示最小的缩放比例
    maximum-scale=2.0:表示最大的缩放比例
    user-scalable=yes:表示用户是否可以调整缩放比例 -->

2.通过媒体查询来设置样式media query

media query 是响应式设计的核心,它能够和浏览器进行沟通,告诉浏览器页面如何呈现,假如一个终端的分辨率小于980px,那么可以这样写

    @media screen and (max-width:980px){
         #head {}
         #content {}
         #footer {}
    }

这里面的样式会覆盖掉之前所定义的样式。

3.设置多种视图宽度

假如我们要兼容ipad和iphone视图,我们可以这样设置:

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

ps:@media screen 和 @media screen only的区别:

only用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

一些注意的

  1. 宽度需要使用百分比
    #head { width: 100% }
    #content { width: 50%; }

2.处理图片缩放的方法

  • 简单的解决方法可以使用百分比,但这样不友好,会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了,就缩小。假如图片小了,就原尺寸输出。
 img { width: auto; max-width: 100%; }

来源:http://caibaojian.com/356.html

展开阅读全文

没有更多推荐了,返回首页