@media 媒体查询
@media screen and (max-width: 300px) {
//当视口宽度小于等于300px时生效
}
max-width 相当于 <=
@media screen and (min-width: 300px) {
//当视口宽度大于等于300px时生效
}
max-width 相当于 >=
@media screen and (min-windth:300px) and (max-width:600px) {
//当视口宽度介于300px 和 600px 之间时生效
}
大于等于多少,小于等于多少的写法。
举例:
body{
background: orange;
}
@media screen and (max-width:1200px) {
body{
background: green;
}
}
@media screen and (max-width:1000px) {
body{
background: blue;
}
}
起初,背景色是orange;
逐渐缩小视口到1200px,继续缩小,背景色变为green;
继续缩小至1000px,变为 blue。
@media 媒体查询的更多相关文章
- css3 media媒体查询器用法总结
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- css3 media媒体查询器用法总结 兼容ie8以下的方法
总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...
- CSS Media媒体查询使用大全,完整媒体查询总结
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
- CSS3@media媒体查询
CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...
- 控制页面打印的2种方法(css3的media媒体查询和window.print())
在实际开发中,有时可能会有打印的需求.下面我总结了2种打印的方法,希望对各位小伙伴有所帮助. ①:直接用window.print()方法就可以打印整个页面,下面是一个小demo <!DOCTYP ...
- python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架
一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...
- 语义化标签和media媒体查询可以放心使用
现在的高级浏览器都支持html5,只有IE6-IE8不支持.(下面说的IE均值IE6-IE8) 有两个特性在IE是可以使用的: 1.语义化标签: header(头部) section(区块) foot ...
- @media媒体查询
@media媒体查询 @media screen and (min-width:640px) and (max-width:1920px){/*当屏幕尺寸大于640px时与小于1920时*/ .pub ...
- css3 media媒体查询器用法总结(附js兼容方法)
css3 media媒体查询器用法总结 标签:class 代码 style html sp src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
- CSS3 media媒体查询器的使用方法
最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器. 那么什么是me ...
随机推荐
- 挖矿病毒 qW3xT.2 最终解决方案
转自:https://blog.csdn.net/hgx13467479678/article/details/82347473 1,cpu 100%, 用top 查看cpu100 2,删掉此进程 c ...
- 使用scp命令在多个Linux系统间进行文件复制
一,什么是scp scp是linux系统下基于ssh登陆进行安全的远程文件拷贝命令.scp命令可以在linux服务器之间复制文件和目录.scp使用ssh安全协议传输数据,具有和ssh一样的验证机制,从 ...
- 【转】关于免费SSL证书的那些事儿
根据 Let’s Encrypt CA 的统计,截至 2017 年 11 月,Firefox 加载的网页中启用 HTTPS 的比例占 67%,比去年底的 45% 有巨大提升.浏览器开发商如 Mozil ...
- Mongodb系列- java客户端简单使用(CRUD)
Mongodb提供了很多的客户端: shell,python, java, node.js...等等. 以 java 为例实现简单的增删改查 pom文件: <dependencies> & ...
- nginx环境安装配置fail2ban屏蔽攻击ip
安装 fail2ban yum install -y epel-release yum install -y fail2ban 设置 Nginx 的访问日志格式 这个是设置 fail2ban 封禁 ...
- Atitit 文员招募规范 attilax总结
Atitit 文员招募规范 attilax总结 1. 概念 2 2. 文员招募范文 2 3. 重大意义 3 3.1. 第一层 文章撰写 能力 3 3.2. 第二次 文档管理能力 文档索引 检索查找 ...
- vivado和modelsim联合调试仿真
vivado和modelsim联合调试仿真 0赞 发表于 2017/5/10 19:10:59 阅读(881) 评论(0) 使用vivado和modelsim联合调试仿真时,在破解完modelsim后 ...
- 使用Mybatis-Generator自动生成Dao、Model、Mapping
Mybatis属于半自动ORM,在使用这个框架中,工作量最大的就是书写Mapping的映射文件,由于手动书写很容易出错,我们可以利用Mybatis-Generator来帮我们自动生成文件. 1.相关文 ...
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...
- java语言的优缺点
转载自:https://blog.csdn.net/bingshanyijiao_fkx/article/details/51613954 角度一: 优点:简单.安全.稳定.跨平台 缺点:需要运行环境 ...