文章来自:源码在线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)、图片处理:
那还有一个问题,背景图片怎么设置呢?以下有解决方案