@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. 阻止后续事件的发生 onclick 双return 事件绑定(..$).click一个return

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Spring 3.1 entityManagerFactory java.lang.NoSuchFieldError: NULL Error

    This means there is a version mismatch--most likely with spring classes. So make sure all your sprin ...

  3. c++经典排序算法全集(转)

    C++排序算法全集 排序算法是一种基本并且常用的算法.由于实际工作中处理的数量巨大,所以排序算法对算法本身的速度要求很高. 一.简单排序算法 由于程序比较简单,所以没有加什么注释.所有的程序都给出了完 ...

  4. LUA全总结

    ------------------------------------------------------------------------------ --2018.7.21 do --开启或关 ...

  5. android应用程序monkey压力测试(模拟器或真机)

    首先需要安装一个模拟器: 前置条件: 1.jdk环境配置 2.eclipse下载安装(直接解压即可) 3.网站上下载ADT: 由于国内禁止google的浏览,所以需要自己上网找资源,下面这个网站有比较 ...

  6. Python操作mysql之模块pymysql

    pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.但目前pymysql支持python3.x而后者不支持3.x版本. 本文环境 python3.6.1  Mysql ...

  7. day25 map,filter,reduce 内置函数,作业

    =====================作业一#用map来处理字符串列表啊,把列表中所有人都变成sb,比方alex_sbname=['alex','wupeiqi','yuanhao']###### ...

  8. WSTMart开发文档

    WSTMart开发文档页面   PC版   开源版 授权版   序言   WSTMart安装协议   WSTMart电商系统安装   商城前台安装操作指南   用户中心指南   商家中心操作指南   ...

  9. AI ML DL

    在经历了蛮荒的PC互联网时代,混战的移动互联网时代,到现今最火的人工智能时代. 大数据.云计算.机器学习的技术应用,已经使得IT从业者的门槛越来越高. 套用一句樊登读书会的宣传口号“keep lear ...

  10. 我所理解的 PHP Trait

    Trait 是从 PHP 5.4 加入的一种细粒度代码复用的语法.以下是官方手册对 Trait 的描述: Trait 是为类似 PHP 的单继承语言而准备的一种代码复用机制.Trait 为了减少单继承 ...