@media媒体查询
@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媒体查询的更多相关文章
- 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 ...
- css3 media媒体查询器用法总结(附js兼容方法)
css3 media媒体查询器用法总结 标签:class 代码 style html sp src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
- CSS3 media媒体查询器的使用方法
最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器. 那么什么是me ...
随机推荐
- Python time、datetime
简介: 记录一下 Python 如何获取昨天.今天.明天时间及格式化. 1.今天 In [1]: import time In [2]: print time.strftime('%Y.%m.%d', ...
- PM2 介绍
[源引]https://github.com/Unitech/pm2 pm2 是一个带有负载均衡功能的Node应用的进程管理器.当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着 ...
- Kubernetes集群的安装部署
此文参照https://www.cnblogs.com/zhenyuyaodidiao/p/6500830.html,并根据实操过程略作修改. 1.环境介绍及准备: 1.1 物理机操作系统 物理机操作 ...
- __next__和__iter__实现迭代器协议
---恢复内容开始--- #_*_coding:utf-8_*_ __author__ = 'Linhaifeng' class Foo: def __init__(self,x): self.x=x ...
- Java Thread系列(二)线程状态
Java Thread系列(二)线程状态 一.线程的五种状态 新建状态(New):新创建了一个线程对象,尚未启动. 就绪状态(Runnable):也叫可运行状态.线程对象创建后,其他线程调用了该对象的 ...
- Java程序设计11——GUI设计与事件处理A
1.GUI设计 Java使用AWT和Swing类完成图形用户界面编程,AWT全称是Abstract Window Toolkit,即抽象窗口工具集,它是Sun最早提供的GUI库,只是这个库功能比较有限 ...
- android屏幕页面实现滚动,页面跳转
在 在LinearLayout外面包一层ScrollView即可,如下代码 Apidemo 中关于如何使用ScrollView说明,请参考:<ScrollView xmlns:android=& ...
- [GO]conext的使用
package main import ( "context" "time" "net/http" "fmt" &quo ...
- GIT checkout 和 reset 区别
git checkout -- file:撤销对工作区修改:这个命令是以最新的存储时间节点(add和commit)为参照,覆盖工作区对应文件file:这个命令改变的是工作区 git reset HEA ...
- linux每天一小步---touch命令详解
1 命令功能: 创建文件和修改文件或者目录的时间戳 2 命令语法: touch [选项] [文件名或者目录名] 3 命令参数: -a 只修改文件的access(访问)时间. -c 或-- ...