实现响应式的简单思路

1. 自适应布局页面

这部分我觉得最重要的是要有自适应布局的意识,首先设计稿制作的时候多用栅格化设计,区块明显,比如小米和联想的商城首页(虽然这俩都没有做响应式,手机端貌似是单独的?),再比如摩托罗拉和诺基亚的首页。

然后多用float, 百分比单位,以及css3里的flex弹性布局等等。

自适应布局其实就是随着显示设备宽度的变化而让页面版式进行调整,一般就是宽度自适应调整。虽然单页面应用没做过不是很理解,但是一般做响应式就是直接自适应加媒介查询(吧?)当然诸如bootstrap也提供了栅格化的解决方案,可以让gird区块直接浮动调整。

2. 使用viewport

上面说到设备宽度,关于设备宽度有一个meta标签viewport,用来定义不同设备的页面缩放、页面宽度。

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

viewport有六个默认的属性,包括width, initial-scale, maximum-scale, minimum-scale, height, user-scalable

个人理解viewport实际上应当包括三种情况:

  • layout-viewport 浏览器默设置的viewport宽度(移动端上往往大于屏幕视窗大小)
  • visial-viewpoort 设备的实际显示范围(比如手机320px宽那就显示这么宽)
  • idea-viewport 不同设备的实际显示范围(每个手机的尺寸不一样吗,所以是理想的)

width=device-width就是设置页面为idea-viewport,让页面宽度等于设备宽度。

但是苹果设备不支持。横竖都为竖屏的idea-viewport

使用initial-scale=1.0 ,就是使页面基于idea-viewport进行缩放,因此直接写initial-scale=1.0也可以达到这样的效果,那页面尺寸就和实际尺寸一样了。

但是windows设备不支持,横竖都为竖屏的idea-viewport

两者都写上的话,取两者定义的最大的宽度的viewport

visual viewport宽度 = ideal viewport宽度  / 当前缩放值
当前缩放值 = ideal viewport宽度  / visual viewport宽度

在iphone和ipad上,无论你给viewport设的宽的是多少,如果没有指定默认的缩放值,则iphone和ipad会自动计算这个缩放值,以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

3. 使用相对宽度%

主要是不要用定宽,这个两栏、多栏自适应布局其实都用的很多了。但是主要有比如说margin, padding等依靠的是父元素的宽度,设置的时候要格外注意

4. 使用相对单位em rem

em是基于当前父元素的font-size

rem中得”r”在W3C里给的定义是”root”,所以在html元素下定义,全局都是有效的,可以很方便的用来做全局的统一单位。

  • 下列代码没有给根元素定义为比如20px或者别的什么数值,主要是为了方便换算
  • 没有用1px是因为(之前版本的?)chrome对字体大小要求不能小于10px
1
2
3
4
5
6
7
html {
rem: 100px;
}
div#parent {
width: 0.1 rem; //10px
height: 0.1 rem;//10px
}

5. 使用media query替换样式表

<link rel="stylesheet" type="text/css" 
media="screen and (max-device-width: 400px)" 
href="tinyScreen.css" />

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

6. 使用媒介查询@media

max-width和min-width是否同时出现都是可选。当屏幕尺寸符合宽度要求时,就会显示对应部分的css样式

@media screen and (max-width: ) and (min-width: ) {
    csscode
} 

个人建议@media都写在原始样式附近,因为@media依然会继承原始样式。这样便于修改。

不过我习惯写完之后最后全部截取出来放到一个response.css里,要响应式就引用,不需要就不引用

7. 使用流动布局float/fluid grid

使用float,包裹元素宽度不够了就自动换行。但是最好还是给元素写上百分比的宽度,这样可以自动充满这一行

至于流动布局和弹性布局

弹性布局主要就是使用flex,通过对主轴次轴进行持续排列,以及给flex-item设置flex-grow flex-shrink flex-basis 来自动调整子元素

8. 图片自适应

<img>添加max-width=100%,可以使图片在的大小在包裹元素给定的width内缩放到最大,类似background-sizecontain ^contain