四十四栅格系统实现(JavaScript原生脚本媒体查询)
Posted 上善若水
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了四十四栅格系统实现(JavaScript原生脚本媒体查询)相关的知识，希望对你有一定的参考价值。
前言：我们在学习
bootstrap前端框架技术的时候，会学到全局css样式：栅格系统。今天，我就用两种方式实现栅格系统，方式一：使用原生javascript脚本；方式二：媒体查询
- 方式一：使用JavaScript原生脚本实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>栅格系统</title>
<style>
*
margin: 0;
padding: 0;
list-style: none;
.container
height: 40px;
margin: 0 auto;
background-color: rebeccapurple;
</style>
</head>
<body>
<div class="container">
</div>
<script>
window.addEventListener("load",function()
// 1. 定义、获取变量
var container = document.querySelector(".container");
var clientW = 0;
resize();
// 2. 监听窗口的大小变化
window.addEventListener("resize",resize);
function resize()
// 2.1. 获取改变后的宽度
clientW = window.innerWidth;
// console.log(clientW);
// 2.2. 判断
if(clientW >= 1200)
// 超大屏幕
container.style.width = "1170px";
else if(clientW >= 992)
// 大屏幕
container.style.width = "970px";
else if(clientW >= 768)
// 小屏幕
container.style.width = "750px";
else
// 超小屏幕
container.style.width = "100%";
);
</script>
</body>
</html>
- 方式二：使用媒体查询实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>栅格系统</title>
<style>
*
margin: 0;
padding: 0;
list-style: none;
.container
height: 40px;
margin: 0 auto;
background-color: rebeccapurple;
/* 媒体查询 */
@media screen and (max-width: 768px)
.container
width: 100%;
@media screen and (min-width: 768px) and (max-width: 992px)
.container
width: 750px;
@media screen and (min-width: 992px) and (max-width: 1200px)
.container
width: 970px;
@media screen and (min-width: 1200px)
.container
width: 1170px;
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
以上是关于四十四栅格系统实现(JavaScript原生脚本媒体查询)的主要内容，如果未能解决你的问题，请参考以下文章