之前在用bootstrap的时候,发现其中container设置了响应式布局,然后根据逻辑自己敲了一遍.
现在移动端越来越火,基本所有的网页都会根据移动端做一些适配,其中响应式布局,就是适配中关键的一环.其实响应式布局十分简单,通过JS原生代码,或者是@media,都可以进行响应式布局,下面我们来试试.
利用原生JS代码实现响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
height: 30px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
</div>
<!--
四个档位 1170 970 750 100%
-->
<script>
window.onload=function () {
//1.拿到container标签
var container = document.querySelector('.container');
windowChange();
//2.监听窗口发生改变...
window.addEventListener('resize',windowChange)
function windowChange() {
//3.拿到口的宽度
var windowWidth=window.innerWidth; //width + padding
if(windowWidth>=1170){
container.style.width=1170+'px';
}else if(windowWidth>=970){
container.style.width=970+'px';
}else if(windowWidth>=750){
container.style.width=750+'px';
}else{
//...
container.style.width='100%';
}
}
}
</script>
</body>
</html>
其实有基础的朋友看眼代码就能理解了,所谓响应式代码就是监听了window的宽度,当宽度改变到一定程度时,布局相应的进行变化,这就是简易的响应式布局.如果认为JS原生代码很麻烦?不喜欢敲?可以,我们还可以通过媒体查询来实现.
媒体查询实现响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
height: 30px;
background-color: red;
margin: 0 auto;
}
/*... 750*/
@media (max-width: 750px){
.container{
width: 100%;
}
}
@media (min-width: 750px) and (max-width: 970px){
.container{
width: 750px;
}
}
@media (min-width: 970px) and (max-width: 1170px){
.container{
width: 970px;
}
}
@media (min-width: 1170px) {
.container{
width: 1170px;
}
}
</style>
</head>
<body>
<div class="container">
</div>
<!--
四个档位 1170 970 750 100%
-->
</body>
</html>
@media标签,其作用就是允许添加表达式用以媒体查询,以此来选择不同的样式表,从而自动适应不同的屏幕分辨率。不过该标签是CSS3的,对于IE老版本(IE9-)的兼容性存在问题(为什么老是要为IE去做兼容?),所以大家用的时候注意下.其实媒体查询的逻辑和之前JS的原生代码逻辑相同,所以这里就不再叙述了
@media其实还有许多的媒体类型,比如@meida all用于所有设备,@media print用于打印设备,@media speech应用于屏幕阅读器等发声设备,@media screen 用于电脑屏幕,平板电脑,智能手机等.
你也可以直接在link里用来判断当某个尺寸时,引入某个css
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 768px)">
这条代码意思是在大于或等于768时使用style.css.
大概的响应式布局就写到这了,很浅显却又很重要的功能,其实如果真要深入,去各类型做适配,也很麻烦,今天就写这么多吧.