CSS3 @media 查询,根据屏幕screen大小调节前端显示;媒体查询方法的使用
------------------- 1.媒体查询方法在 css 里面这样写 --------------------
@media screen and (min-width: 320px) and (max-width: 480px){
在这里写小屏幕设备的样式
}
@media only screen and (min-width: 321px) and (max-width: 1024px){
这里写宽度大于321px小于1024px的样式(一般是平板电脑)
}
@media only screen and (min-width: 1029px){
这里写pc客户端的样式
}
使用JS判断屏幕是横屏还是竖屏,然后使用媒体查询进行CSS设置:https://www.w3cways.com/1772.html
参考:
http://www.runoob.com/cssref/css3-pr-mediaquery.html
http://blog.51cto.com/ezbanana/1892526
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
CSS3 @media 查询,根据屏幕screen大小调节前端显示;媒体查询方法的使用的更多相关文章
- 第九十四节,html5+css3移动手机端流体布局,旅游部分,媒体查询
html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...
- surface重装系统后,屏幕亮度不能调节,显示适配器出现黄色三角、windows hello不能正常使用
surface重装系统后,屏幕亮度不能调节,显示适配器出现黄色三角,windows hello不能正常使用,解决方法是安装驱动精灵,更新硬件驱动重启即可解决
- pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率 比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
- QT 13 窗口屏幕设置大小与居中显示
<pre name="code" class="cpp">#include "mainwindow.h" #include &l ...
- css3 media媒体查询器用法总结
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- css3 media媒体查询器用法总结 兼容ie8以下的方法
总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...
- css3 media媒体查询器用法总结(附js兼容方法)
css3 media媒体查询器用法总结 标签:class 代码 style html sp src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
- Html5 @media + css3 媒体查询
css3 media媒体查询器用法总结 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错 ...
- 总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。(转)
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--兼容ie-->< ...
随机推荐
- python 使用国内源安装软件
python linux 等 使用国内源安装软件 速度更快 你值得拥有 ! 豆瓣源:pip install -i https://pypi.douban.com/simple/ 阿里源:pip ins ...
- 初学jmeter
jmeter安装的前提需要有jdk环境,下载安装好jdk环境后记得要设置好环境变量. 配置环境变量:右击“我的电脑”-->"高级"-->"环境变量" ...
- linux命令(9):route命令
查看路由表:route –n //添加到主机的路由 # route add –host 192.168.168.110 dev eth0 # route add –host 192.168.168.1 ...
- recv函数的MSG_PEEK标志介绍
考虑下面的场景,server向client发送数据"_META_DATA_\r\n_USER_DATA_",要求"\r\n"之前的数据_META_DATA_在第 ...
- hdu 1325(并查集)
Is It A Tree? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- shell读取nginx配置文件中nginx的端口
#!/bin/shport=`nl /usr/local/openresty/nginx/conf/nginx.conf | sed -n '/listen/p' | awk 'NR==1{print ...
- Qtp中一个或多个ActiveX控件无法显示问题
今天在使用qtp进行登陆测试的时候,发现了一个问题,现总结归纳如下: [问题] 在测试过程中,一直提醒:一个或多个ActiveX控件无法显示,原因可能是下列其中之一: 如下图所示: [解决办法] 在Q ...
- CentOS 7.4 上如何安装 tomcat 9
本文将详细讲解在 CentOS 7.4 系统上如何安装tomcat 9,tomcat是没有32位和64位之分的. 创建tomcat的安装路径 首先在/usr/local/下建立一个tomcat的文件夹 ...
- Shiro源码分析之Subject和SecurityManager
Subject 毫无疑问,Subject是Shiro最重要的一个概念. “Subject”只是一个安全术语,意味着应用程序用户的特定于安全性的“视图”.Shiro Subject实例代表单个应用程序用 ...
- mysql查询优化以及面试小结
mysql面试小结: 1.mysql的基本架构 2.mysql的索引 btree+的原理 3.mysql的索引优化 4.mysql的sql查询优化 慢查询日志 Show prodile 全局查询日志 ...