媒体查询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 ...
随机推荐
- Debian9 无线网卡驱动安装
https://wiki.debian.org/iwlwifi sudo vi /etc/apt/sources.list --------- ..... deb http://httpredir.d ...
- node fs-extra文件操作模块的使用（支持同步、异步）
用法参见:fs-extra
- XIN队算法
XIN队算法 注:名称由莫队算法改编而来 从luogu搬过来了... \(newly\;upd:2021.7.8\) \(newly\;upd:2021.6.6\) OI至高算法,只要XIN队算法打满 ...
- python errno库与socket.connect_ex()方法的结合使用
前言:一般socket链接会首选connect方法,该方法会一直尝试链接.那么今天展示下connect_ex()方法,该方法如果链接成功会返回0,失败会返回errno库中的errorcode中的key ...
- 卷积的等变性(equivariant) / 不变性(invariant）
不变性:输入x发生变换,但是F之后的输出不变 \(F(x)=F [\)transform\((x)]\) 池化:近似不变性,当图像发生微小变化,最大池化的输出不变,还是一个池化范围内的max 等变性: ...
- python算法（2）兔子产子（斐波那切数列）
兔子产子 1.问题描述 有一对兔子,从出生后的第3个月起每个月都生一对兔子.小兔子长到第3个月后每个月又生一对兔子,假设所有的兔子都不死,问30个月内每个月的兔子总对数为多少? 2.问题分析 兔子产子 ...
- fastboot刷机小脚本
在Windows系统下,一般刷机命令是在cmd路径下执行如下命令: 1.adb reboot bootloader2.fastboot flash boot +boot路径3.fastboot fla ...
- 特殊回文数 BASIC-9
特殊回文数 代码 import java.util.Scanner; /*123321是一个非常特殊的数,它从左边读和从右边读是一样的. 输入一个正整数n, 编程求所有这样的五位和六位十进制数, 满足 ...
- 十六进制转十进制 BASIC-12
十六进制转十进制 代码 import java.math.BigInteger; import java.util.Scanner; /* * 从键盘输入一个不超过8位的正的十六进制数字符串, * 将 ...
- [.NET大牛之路 007] 详解 .NET 程序集
.NET大牛之路 • 王亮@精致码农 • 2021.07.13 上一篇我们介绍了 Roslyn 编译器,我们知道,我们编写的 C#/VB 代码经过 Roslyn 编译器编译后会生成程序集文件.按照之前 ...