媒体查询和栅格系统使用

媒体查询的目的：了解如何使用媒体查询做响应式页面。

媒体查询会写如下代码即可：

body {background-color: gray;
}/* 大于等于768px 为粉色 */
@media (min-width: 768px) {body {background-color: pink;}
}/* 大于等于992px 为蓝色 */
@media (min-width: 992px) {body {background-color: skyblue;}
}/* 大于等于992px 为绿色 */
@media (min-width: 1200px) {body {background-color: green;}
}

媒体查询使用场景1

约束移动端不要超过规定大小

body {max-width: 540px;margin: 0 auto;
}/* 大于等于540px 则不允许  html文字大小再改动，强制定为 54px*/
@media (min-width: 540px) {html {font-size: 54px !important;}
}

媒体查询使用场景2

元素的显示和隐藏

@media (max-width: 800px) {.box div:nth-child(2) {display: none;}.box div:last-child {width: 350px;}
}

媒体查询使用场景3

响应式原理:通过@media媒体标签判断屏幕大小, 让盒子在不同宽度呈现不同的摆放顺序

  <style>.box {width: 1000px;height: 150px;/* background-color: pink; */margin: 0 auto;display: flex;flex-wrap: wrap;}.box div {width: 25%;background-color: skyblue;height: 150px;margin-bottom: 20px;}.box div:nth-child(even) {background-color: pink;}@media (max-width: 992px) {.box {width: 768px;}.box div {width: 50%;}}@media (max-width: 768px) {.box {width: 100%;}.box div {width: 100%;}}</style>
</head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>

Bootstrap

并且引入到html文件中

<link rel="stylesheet" href="./css/bootstrap.min.css">

栅格系统

栅格系统(gridsystems),也叫“网格系统，它就是通过一系列的行（row）与列（column）的组合创建页面布局。

简单说，栅格系统也是一种布局方式。 BootStrap 给咱们内置好了一套布局系统。

BootStrap3默认将网页分成12等份

比如，超大屏幕下我们想要一个通栏的大盒子

<div class="container"><div class="col-lg-12">我自己独占一行</div></div>

超大屏下，如果一行放4个，怎么做呢？

 <div class="container"><div class="col-lg-3">我占左边3个</div><div class="col-lg-3">我站右边3个</div><div class="col-lg-3">我站右边3个</div><div class="col-lg-3">我站右边3个</div></div>

如果实现不同屏幕下，不同的显示个数，可以通过使用不同类名。

还是这4个盒子，如果在中等屏幕下放3个怎么做呢？

 <div class="container"><div class="col-lg-3 col-md-4">盒子内容</div><div class="col-lg-3 col-md-4">盒子内容</div><div class="col-lg-3 col-md-4">盒子内容</div><div class="col-lg-3 col-md-4">盒子内容</div></div>

媒体查询和栅格系统使用相关推荐

四十四、栅格系统实现(JavaScript原生脚本、媒体查询)
前言:我们在学习bootstrap前端框架技术的时候,会学到全局css样式:栅格系统.今天,我就用两种方式实现栅格系统,方式一:使用原生JavaScript脚本:方式二:媒体查询 bootstrap栅 ...
Bootstrap3 栅格系统-媒体查询
在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值. /* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 B ...
Bootstrap之移动设备优先、栅格系统、媒体查询，响应式式布局
1. html5中head标签里引入 meta Bootstrap 实行移动端优先原则响应式布局 <meta name="viewport" content="w ...
vue-cli、脚手架创建、eslint、alias别名配置、proxy代理配置、axios、scoped、穿透、媒体查询、12栅格、动态rem、1px边框、移动端事件、300ms延迟问题（六）
vue-cli的使用现在使用前端工程化开发项目是主流的趋势,也就是说,我们需要使用一些工具来搭建vue的开发环境.一般情况下我们都会选择使用webpack进行项目的构建,在这里我们直接使用vue官方 ...
CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式
前言在最近学习中突然看到了在媒体查询中prefers-color-scheme:dark监听的使用,然后就模仿里边写了个简单例子,代码如下: body {background-color: #f5f ...
移动端zepot媒体查询media queries
使用zepot做轮播图 <head> <meta charset="utf-8"> <meta name="viewport" c ...
【前端4】bootstrap：栅格系统，隔行/触摸换色，分页/导航条，模态框/轮播图，旅游首页
文章目录 1.bootstrap基本模板:meta/title,link/script 2.两种布局容器/栅格系统:自动补 3.样式_表格/按钮/图片/表单:class属性,for属性联动 4.组件_ ...
一文带你马上清楚bootstrap的栅格系统
bootstrap的栅格系统我们都知道bootstrap的栅格系统是为了实现网站的响应式布局,但bootstrap提供了一套响应式.移动设备优先的流式栅格系统,它会将网页分为12等价(宽度),举个例 ...
CSS3 @media媒体查询适配不同尺寸设备的响应式布局（清晰详解）
随着宽屏的不断普及,CSS3出现了@media媒体查询技术一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...