时间:2021-07-01 10:21:17 帮助过:8人阅读
2,实现响应式布局的三种方式
1. CSS3-Media Query(最简单的方式,但是无法满足很多需求)
2. 借助原生Javascript(成本高,不推荐使用)
3. 第三方开源框架(比如bootstrap,可以很好的支持浏览器的响应式布局)
3,CSS3-Media Query常见属性
device-width,device-height 屏幕宽高
width,height 渲染窗口宽高
orientation 设备方向
resolution 设备分辨率
4,CSS3-Media Query基本语法
外联CSS语法和内嵌样式的语法
举例:外联样式表link.css(当屏幕宽度小于等于480px时背景呈红色)
link.css语法只有一句话:body{background: red;}
5,Bootstrap
使用bootstrap必须引入css和js文件,一共三个,且顺序不能反(版本可以换),如下所示
<script src="js/jquery.min.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js"></script>
以上就是如何实现响应式布局的详细内容,更多请关注Gxl网其它相关文章!