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-->< ...
随机推荐
- 深度学习方法:受限玻尔兹曼机RBM(二)网络模型
欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 技术交流QQ群:433250724,欢迎对算法.技术.应用感兴趣的同学加入 上解上一篇RBM(一)基本概念, ...
- hdu 2389(二分图hk算法模板)
Rain on your Parade Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 655350/165535 K (Java/Ot ...
- Java之IO流的关闭
1.在finally中关闭流: OutputStream out = null; try { out = new FileOutputStream(""); // ...操作流代码 ...
- Codeforces gym102058 J. Rising Sun-简单的计算几何+二分 (2018-2019 XIX Open Cup, Grand Prix of Korea (Division 2))
J. Rising Sun time limit per test 1.0 s memory limit per test 1024 MB input standard input output st ...
- python抓取网页图片的小案例
1.分析 ,要抓取的页面的信息以及对应的源码信息 blog.sina.com.cn/s/blog 93dc666c0101b1bj.html 2.代码模块: 导入正则表达的模块 导入url相关的模块 ...
- ZOJ 3497 Mistwald
矩阵快速幂. 邻接矩阵的$P$次方就是走$P$步之后的方案数,这里只记录能否走到就可以了.然后再判断一下三种情况即可. #pragma comment(linker, "/STACK:102 ...
- LoggerAspect
package nc.oss.utils; import java.util.Date; import nc.bs.framework.common.InvocationInfoProxy; impo ...
- PL\SQL结构控制、异常
PL\SQL结构控制 1.IF条件控制语句(三种基本方式+IF语句的嵌套使用) (1)IF... (2)IF...ELSE (3)IF...ELSIF. ...
- uva 10910(子集和问题)
Marks Distribution Time limit: 3.000 seconds In an examination one student appeared in N subjects an ...
- 【线段树】XIII Open Championship of Y.Kupala Grodno SU Grodno, Saturday, April 29, 2017 Problem J. Jedi Training
题意:给你一个序列,支持两种操作:单点修改:询问一个区间中所有相邻位置下标奇偶性均不同的子序列中,和最大的是多少. 线段树每个结点维护四个值: 以奇数下标开始到奇数下标结束的最大子序列和: 以偶数下标 ...