四十四、栅格系统实现(JavaScript原生脚本、媒体查询)

前言：我们在学习bootstrap前端框架技术的时候，会学到全局css样式：栅格系统。今天，我就用两种方式实现栅格系统，方式一：使用原生JavaScript脚本；方式二：媒体查询

bootstrap栅格系统参数信息

方式一：使用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原生脚本、媒体查询)相关推荐

四十四种Javascript技巧大全
四十四种Javascript技巧大全 1.第一个给变量分配值时不要忘了var关键字. 分配值给未定义的变量将是该变量自动成为全局变量,应该避免全局变量. 2.使用 === 而不是 == 使用 == ( ...
[系统安全] 四十四.APT系列(9)Metasploit技术之基础用法万字详解及防御机理
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...
JavaScript学习（四十四）—in关键字的使用和for in循环遍历对象的属性
JavaScript学习(四十四)-in关键字的使用和for in循环遍历对象的属性一.in关键字的使用作用:判断某个属性是否属于对象格式:属性名称 in 对象名称 ; 返回值:如果返回的结果为 ...
【Visual C++】游戏开发笔记四十四浅墨DirectX教程十二网格模型和X文件使用面面观
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/details/8586540 作者:毛星云(浅墨 ...
【正点原子FPGA连载】第四十四章MT9V034摄像头HDMI显示实验 -摘自【正点原子】新起点之FPGA开发指南_V2.1
1)实验平台:正点原子新起点V2开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=609758951113 2)全套实验源码+手册+视频下载地址:ht ...
【Visual C++】游戏开发笔记四十四浅墨DirectX教程十二网格模型和X文件使用面面观...
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接:http://blog.csdn.net/zhmxy555/article/details/8586540 作者:毛星云(浅墨) ...
Python编程基础：第四十四节方法重写Method Overriding
第四十四节方法重写Method Overriding 前言实践前言我们前面说了,子类继承于父类,可以调用父类的所有属性和方法.那么如果我们想在继承的过程中重新书写父类的某些方法,此时就用到了方 ...
四十四、深入Java 的序列化和反序列化
@Author:Runsen @Date:2020/6/8 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
NeHe OpenGL教程第四十四课：3D光晕
转自[翻译]NeHe OpenGL 教程前言声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

四十四、栅格系统实现(JavaScript原生脚本、媒体查询)

四十四、栅格系统实现(JavaScript原生脚本、媒体查询)相关推荐

最新文章

热门文章