@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 ...
随机推荐
- 使用opencv3+python实现视频运动目标检测
本文主要实现了伯乐在线上的一个实践小项目,原文链接,用以巩固opencv视频操作知识内容.整个项目均有代码注释,通俗易懂,短短几十行就可以达到还算不错的实现效果,做起来成就感满满哒.打开编辑器,一起来 ...
- Thymeleaf 标准表达式语法
变量表达式${ } 在控制器中往页面传递几个变量: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 @Controller public class IndexController ...
- servlet中关于下载
package com.huawei.response; import java.io.BufferedInputStream;import java.io.IOException;import ja ...
- S SQL
样品申请单状态更新为“审核不通过” select STATUS_CD from S_ORDER where row_id='1-5U7IL' update S_ORDER set STATUS_CD= ...
- IDEA07 快捷键统计插件之Key Promoter X
1 官方介绍 该插件会统计你鼠标操作的次数,然后在一个窗口中展示出来 https://plugins.jetbrains.com/plugin/9792-key-promoter-x 2 下载.安装. ...
- Linux内核分析 - 网络[十四]:IP选项
Linux内核分析 - 网络[十四]:IP选项 标签: linux内核网络structsocketdst 2012-04-25 17:14 5639人阅读 评论(1) 收藏 举报 分类: 内核协议栈 ...
- CentOS7下NFS服务安装及配置
系统环境:CentOS Linux release 7.4.1708 (Core) 3.10.0-693.el7.x86_64 软件版本:nfs-utils-1.3.0-0.48.el7_4.x86_ ...
- PhpStorm (强大的PHP开发环境)2017.3.2 附注册方法
最新版PhpStorm 2017正式版改进了PHP 7支持,改进代码完成功能. PhpStorm 是最好的PHP开发工具,使用它进行PHP开发将会让你感觉到编程的乐趣. 快乐无极终于从oschina看 ...
- yum 系列(二) 离线部署
yum 系列(二) 离线部署 一.下载 rpm 依赖包 (1) yum 下载 rpm 包 准备一台 全新的 CentOS7 mini 虚拟机 ,联网下载所有所需的 rpm 包和其依赖, yum ins ...
- 为什么都说UX / UI设计师是最佳工作?
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 你将成为永远热爱自己工作的人,做着自己喜欢的工作还能得到相应的成果和报酬,就好似在度带薪年假一般,何 ...