媒体查询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 ...
随机推荐
- CSS设置height为100%无效的情况
CSS设置height为100%无效的情况 笔者是小白,不是特别懂前端.今天写一个静态的HTML页面,然后想要一个div占据页面的100%,但是尝试了很多办法都没有实现,不知道什么原因. 后来取百度搜 ...
- ArcGis API JS 4.X本地化部署与地图的基础使用
准备工作 首先下载ArcGIS API for JavaScript4.x,这里下载的是4.19. 官方下载地址:https://developers.arcgis.com/downloads/ ar ...
- CSP-S 2020
游记 Day# 游记个鬼啊就在自家学校=-= 早上宿舍待不了,去机房颓废,看了几集猫和老鼠,并且把看门狗军团的流程看完了(真棒),甚至在考试之前把老师给的巧克力也吃完了. 期间zyt学长来摸鱼.他们今 ...
- 搭建kerberos和NTP服务器以及安全的NFS服务
说明:这里是Linux服务综合搭建文章的一部分,本文可以作为单独搭建Kerberos和NTP时钟服务的参考. 注意:这里所有的标题都是根据主要的文章(Linux基础服务搭建综合)的顺序来做的. 如果需 ...
- nodejs 文本逐行读写功能的实现
利用nodejs实现:逐行读写(从一个文件逐行复制到另外一个文件):逐行读取.处理和写入(读取一行,处理后,写入另一个文件) 1.所需要的模块: fs,os,readline 2.具体实现: a. 功 ...
- IE浏览器 查看Form对象
在ie的debug窗口中,查看form中的值,从form.all("OtherNo").value = 赋值;(fm.all('ActionFlag').value = " ...
- frame window 和open 的关系
建立一个如下的关系框架 windowA.html <!DOCTYPE html> <html lang="en"> <head> <met ...
- ifix 自动化（Automation）错误弹窗的解决方案
在先前ifix项目中添加了语音模块,然后概率性跳出自动化(Automation)错误弹窗,先前分析了很多种原因,从代码的冗余,编码等角度进行了优化,效果不是很理想,仍然会概率性出现.经过反反复复大约3 ...
- 遥远的国度 （树链剖分换根），洛谷P3979
析:显然,若没有换根操作,则为树链剖分板子题,但是这道题我们考虑换根操作 考虑这样一个性质:在一棵树上,两点的距离路径是唯一的!! 也就是说,我们在修改路径上的点权时,不必考虑根在哪里,直接利用模板修 ...
- icmp介绍以及arp攻击
目录 一.ip数据包格式 二.ICMP协议介绍 三.ARP协议介绍 四.ARP攻击原理 一.ip数据包格式 网络层的功能: 定义了基于ip协议的逻辑地址 连接不同的媒介类型 选择是数据通过网络的最佳途 ...