前端知识点整理系列(二)—— 响应式布局

        

2017-05-15

今天整理关于响应式布局的知识。响应式布局这个名词现在应该已经很熟悉了,随着移动端的普及,我们的网站的用户体验需要提升,响应式布局可以解决我们的问题。


什么是响应式布局?

简单点说,就是同一个页面可以适应不同的屏幕大小设备的设计方案,做一个网站同时能兼容多个终端,通过CSS中Media Query(媒介查询)@media功能,来判断我们的终端设备宽度在多少像素内,然后就执行与之对应的CSS样式。

布局及设置meta标签

当创建一个响应式网站,或者非响应式网站变成响应式的时候,首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局,页面固定宽度大小。如果完成了非响应式那么我在去添加媒体查询(Media Query)和响应式代码。这种操作更容易实现响应式特性。在手机设备上,我们要禁止用户来缩放屏幕。不禁止的话,可能在显示上会造成错位,以及显示的不是手机网站的样式。所以,我们要通过代码来禁止用户在手机端上缩放屏幕,已达到正常的手机网站效果。

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

1
2
3
4
5
@media screen and (max-width:980px){
#head { … }
#content { … }
#footer { … }
}

设置多种视图宽度

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

1
2
3
4
5
6
7
8
/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){
}
/**iphone**/
@media only screen and (width:320px)and (width:768px){
}

响应式的图片

  • 大图随容器缩放,保持宽高比
  • max-width: 100%;
1
2
3
4
#wrap img{
max-width:100%;
height:auto;
}

如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充,height为auto的设置是为了保证图片原始的高宽比例,以至于图片不会失真。