媒体查询media query
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>媒体查询-策略</title>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
padding-top: 200px;
}
img{
width: 100%;
height: 100%;
}
.row{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.col{
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(86,61,124,0.15);
border: 1px solid rgba(86,61,124,0.2);
} /* 断点
xs: < 576px
sm: 576 ~ 768px
md: 768 ~ 992px
lg: 992 ~ 1200px
xl: > 1200px 断点怎么来的：当改变屏幕大小的时候，页面会显示不正常，就需要设置断点了。
经验值，预设一些。 */ /* @media (max-width:576px){
.col{
width: 100%;
}
}
@media (min-width:577px) and (max-width:768px){
.col{
width: 50%;
}
}
@media (min-width:769px) and (max-width:992px){
.col{
width: 25%;
}
}
@media (min-width:993px) and (max-width:1200px){
.col{
width: 16.66666667%;
}
}
@media (min-width:1201px){
.col{
width: 8.333333333%;
}
} */ /* PC first 从宽到窄检测，后面的会覆盖前面的，如果检测到匹配的大小就会停止匹配后面的代码 */
.col{
width: 8.33333333%;
}
@media (max-width:1200px){
.col{
width: 16.66666667%;
}
}
@media (max-width:992px){
.col{
width: 25%;
}
}
@media (max-width:768px){
.col{
width: 50%;
}
}
@media(max-width:576px){
.col{
width: 100%;
}
} /* mobile first 从最小屏幕开始判断，从小往大设置的是下限，即min-width*/
.col{
width: 100%;
}
@media(min-width: 576px){
.col{
width: 50%;
}
}
@media (min-width:768px){
.col{
width: 25%;
}
}
@media (min-width:992px){
.col{
width: 16.66666667%;
}
}
@media (min-width:1200px){
.col{
width: 8.33333333%;
}
}
</style>
</head>
<body> <div class="row">
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
<div class="col">
<img src="img/3.8-1.png" alt="">
</div>
</div>
</body>
</html>
bootstrap的断点：
xs: < 576px 超小屏一般是手机
sm: 576px ~ 768px; 小屏一般是大屏手机
md: 768px ~ 992px 中屏一般是平板或小的显示器
lg: 992px ~ 1200px 大屏一般是显示器
xl: > 1200px 超大屏 断点怎么来的：当改变屏幕大小的时候，页面会显示不正常，就需要设置断点了。根据经验取得的值，预设一些。
mobile first优先
媒体查询media query的更多相关文章
- CSS3 之媒体查询Media Query
Media Queries是CSS3有关媒体查询的属性,有了CSS3 之媒体查询Media Queries就可以进行媒体查询,针对每个不同的媒体进行不同的样式编写.传说中的Web响应式布局就可以毫无压 ...
- 媒体查询@media query
@media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...
- 响应式设计的思考:媒体查询(media query)
Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...
- 在javascript中使用媒体查询media query
由于需要,我们可能会在js中用到一些media query,从而针对不同的分辨率做一些操作. //全兼容的 事件绑定 and 阻止默认事件 var EventUtil = { //Notice: ty ...
- css3的媒体查询(Media Queries)
我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...
- CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...
- 媒体查询media参数以及其兼容性问题
一.设置meta标签 在使用媒体查询media之前我们需要先设置meta标签,对设备的缩放等参数进行设定. <!--设置缩放和绘制--> <meta name="viewp ...
- 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...
- 媒体查询Media Queries详解
@media 标签可以说是响应式网页的开发基础.其主要由媒体类型(Media Type)和 媒体特性(Media Query)两部分组成. Media Type 设定后面规则生效的展示类型,包括all ...
随机推荐
- argparse模块基本用法
argparse模块基本用法 在 python 编写的程序中,我们经常会看到的 argparse 相关代码,而它究竟怎么使用呢?接招! argparse 是一个命令行参数解析模块 现在提出需求,我需要 ...
- Resnet网络详细结构（针对Cifar10）
Resnet网络详细结构(针对Cifar10) 结构 具体结构(Pytorch) conv1 (conv1): Conv2d(3, 64, kernel_size=(3, 3), stride=(1, ...
- Java代码中，如何监控Mysql的binlog？
最近在工作中,遇到了这样一个业务场景,我们需要关注一个业务系统数据库中某几张表的数据,当数据发生新增或修改时,将它同步到另一个业务系统数据库中的表中. 一提到数据库的同步,估计大家第一时间想到的就是基 ...
- Android 模块打包生成aar远程坐标（sdk）
Android 模块打包生成aar远程坐标 打包成AAR到本地仓库 在模块的gradle文件中加入apply plugin: 'maven' *repository(url:"file:/ ...
- DASCTF七月赛两道Web题复现
Ezfileinclude(目录穿越) 拿到http://183.129.189.60:10012/image.php?t=1596121010&f=Z3F5LmpwZw== t是时间,可以利 ...
- k8s之Service详解-Service使用
实验环境准备 在使用service之前,首先利用deployment创建出3个pod,注意要为pod设置app=nginx-pod的标签 创建deployment.yaml,内容如下 apiVersi ...
- MapReduce框架-Join的使用
引言 首先先明白在关系型数据库中Join的用法. Join在MapReduce中的用法也是用于两个文件之间的连接. 使用MR程序解决两张表的join问题,有两种解决方案 à MR程序的join应用 1 ...
- Visio操作【未完】
Visio 1.如何操作文档 新建基本框图和空白框图 单击基本框图打开后有模具 空白框图打开之后并没有形状 左下角发现有 更改纸张方向大小 自动调整大小: 如果我们选择形状进入到我们的页面,如果放到边 ...
- Run Clojure Script with External Dependencies without leiningen
The normal way of deploy clojure files is using leiningen. But if we have no leiningen, or the scrip ...
- Python函数调用中的值传递和引用传递问题
这一问题O' Reilly出版的"Learning Python" 2nd Edition的 13.4 节有专门论述,对于不可变(immutabe)对象,函数参数(这里是x和y)只 ...