@media媒体查询

@media screen and (min-width:640px) and (max-width:1920px){/*当屏幕尺寸大于640px时与小于1920时*/
.public_banner_month{padding-top:4%;}
}
@media screen and (max-width: 370px){ /*当屏幕尺寸小于370px时*/
.public_banner_month{padding-top:1%;}
}

另一种方式:

一种是直接在link中判断设备的尺寸,然后引用不同的css文件

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 370px)">

上面的意思是当屏幕的宽度大于等于400px的时候,应用style.css

附件:

https://blog.csdn.net/lockey23/article/details/75452536

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

@media媒体查询的更多相关文章

  1. css3 media媒体查询器用法总结

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

  2. css3 media媒体查询器用法总结 兼容ie8以下的方法

    总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...

  3. CSS Media媒体查询使用大全,完整媒体查询总结

    前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...

  4. CSS3@media媒体查询

    CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...

  5. 控制页面打印的2种方法(css3的media媒体查询和window.print())

    在实际开发中,有时可能会有打印的需求.下面我总结了2种打印的方法,希望对各位小伙伴有所帮助. ①:直接用window.print()方法就可以打印整个页面,下面是一个小demo <!DOCTYP ...

  6. python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架

    一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...

  7. 语义化标签和media媒体查询可以放心使用

    现在的高级浏览器都支持html5,只有IE6-IE8不支持.(下面说的IE均值IE6-IE8) 有两个特性在IE是可以使用的: 1.语义化标签: header(头部) section(区块) foot ...

  8. css3 media媒体查询器用法总结(附js兼容方法)

    css3 media媒体查询器用法总结 标签:class   代码   style   html   sp   src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...

  9. CSS3 media媒体查询器的使用方法

    最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器. 那么什么是me ...

随机推荐

  1. readlink 获取当前进程对应proc/self/exe

    [readlink 获取当前进程对应proc/self/exe] shell中  readlink /proc/self/exe READLINK(2)NAME       readlink - re ...

  2. 中国大陆被SCI收录的较高影响力期刊

    1.清华主办的期刊Nano Research 清华新闻网2012年9月10日电:据汤森路透公司公布的2011年SCI期刊影响因子,清华大学主办的期刊Nano Research(纳米研究)的影响因子为6 ...

  3. Linux文件权限查看及修改命令chmod,chown

    查看权限 Linux文件访问权限分为可读,可写和可执行三种. 可用ls -l命令查看,例: ls -l或者 ll 显示为 -r--r--r--. 1 root root 21 Jan 5 23:02 ...

  4. for 续9

    -------siwuxie095                 for 拾遗:         一: for 语句里,do 后面一般会有括号,有括号就是复合语句, 假如需要用到括号里的变量,就需要 ...

  5. python大规模数据处理技巧之一:数据常用操作

    面对读取上G的数据,python不能像做简单代码验证那样随意,必须考虑到相应的代码的实现形式将对效率的影响.如下所示,对pandas对象的行计数实现方式不同,运行的效率差别非常大.虽然时间看起来都微不 ...

  6. python类和元类

    python 类和元类详解  小麦麦子 2016-09-06 11:11:00        今天在网上看到一篇关于python语言中类和元类(metaclass)的一些讲解和简单运用,感觉对pyth ...

  7. Java 设计模式系列(八)装饰者模式

    Java 设计模式系列(八)装饰者模式 装饰模式又名包装(Wrapper)模式.装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案.Decorator 或 Wrapper 一.装饰模 ...

  8. [.NET] WeakReference的使用

    声明:本篇博客翻译自:http://tipsandtricks.runicsoft.com/CSharp/WeakReferences.html 由于水平(技术水平+英语理解能力)有限/不足,肯定会有 ...

  9. 马婕 2014MBA专硕考试 报刊选读 6(转)

    http://blog.sina.com.cn/s/blog_3e66af4601016udh.html Protecting the weakest保护最弱势群体The recession may ...

  10. 使用js/jquery查找iframe中的

    原生js  一.在iframe的父窗口中获取iframe中的元素: js代码 格式: window.frames["iframe的name值"].document.getEleme ...