响应式开发基础

文章来自：源码在线https://www.shengli.me/css/88.html

一、什么是响应式？

 

就是一个网站能够兼容多个终端。这是为了更好地用户体验起见是这么设计的。

 

二、那都有哪些步骤呢？

 

1、设置meta标签

 

最好首先要完成非响应式布局，这个取决于你个人喜好吧。那接下来要设置meta标签了。

 

代码：

以上代码将设置：屏幕按1:1的尺寸显示，并且以上设置将给iphone以及其他智能手机浏览器提供网站全视图浏览。还有禁止用户缩放页面。

 

2、设置样式media query(通过媒体查询方式)

 

media query能够和浏览器进行沟通，告诉浏览器呈现页面的方式。比如：

一个终端的分辨率小于980px,那么可以这样设置：

3，设置多种视图宽度

 

比如，以下代码将兼容ipad 和iphone视图：

4、字体设置：

 

在这里将使用新的单位rem

 

5、注意的问题：

 

 (1)、宽度可以使用百分比

 

 (2)、图片处理：

那还有一个问题，背景图片怎么设置呢？以下有解决方案