------------------- 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大小调节前端显示;媒体查询方法的使用的更多相关文章

  1. 第九十四节,html5+css3移动手机端流体布局,旅游部分,媒体查询

    html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...

  2. surface重装系统后,屏幕亮度不能调节,显示适配器出现黄色三角、windows hello不能正常使用

    surface重装系统后,屏幕亮度不能调节,显示适配器出现黄色三角,windows hello不能正常使用,解决方法是安装驱动精灵,更新硬件驱动重启即可解决

  3. pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

    PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.1 ...

  4. QT 13 窗口屏幕设置大小与居中显示

    <pre name="code" class="cpp">#include "mainwindow.h" #include &l ...

  5. css3 media媒体查询器用法总结

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

  6. css3 media媒体查询器用法总结 兼容ie8以下的方法

    总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...

  7. css3 media媒体查询器用法总结(附js兼容方法)

    css3 media媒体查询器用法总结 标签:class   代码   style   html   sp   src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...

  8. Html5 @media + css3 媒体查询

    css3 media媒体查询器用法总结   随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错 ...

  9. 总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。(转)

    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--兼容ie-->< ...

随机推荐

  1. linux命令(27):cat命令

    实例一:把 log2012.log 的文件内容加上行号后输入 log2013.log 这个文件里 cat -n log2012.log log2013.log 实例二:把 log2012.log 和 ...

  2. JVM字节码执行引擎和动态绑定原理

    1.执行引擎 所有Java虚拟机的执行引擎都是一致的: 输入的是字节码文件,处理过程就是解析过程,最后输出执行结果. 在整个过程不同的数据在不同的结构中进行处理. 2.栈帧 jvm进行方法调用和方法执 ...

  3. windows网卡命令

    netsh interface ip set address name="本地连接" source=dhcpnetsh interface ip set dns name=&quo ...

  4. K8S的APISERVER,应用了HTTPS之后,命令行如何访问?

    用命令行总是很麻烦,因为要自定义一些证书的位置....... curl https://1.2.3.1:443/api/v1/nodes \ --cacert /etc/kubernetes/pki/ ...

  5. js表单提交回调函数

    在研究表单的时候发现一个有意思的东西——在表单提交的时候如何保证数据全部提交完毕才会清空? 我们常用的<input type="reset" value="重置&q ...

  6. React Native学习

    学习 首先,假使你已经安装了Nodejs 6,也有使用npm进行Nodejs的包管理 npm install -g react-native-cli 也可以使用yarn作为包管理工具 npm inst ...

  7. SocketCluster

    官网地址:https://socketcluster.io/ SocketCluster的组成部分,即运行一个SocketCluster服务器,它在服务器生成的进程 1.主进程(Server.js)一 ...

  8. linux下LD_PRELOAD的用处

    linux下LD_PRELOAD的用处 在UNIX的动态链接库的世界中,LD_PRELOAD就是这样一个环境变量,它可以影响程序的运行时的链接(Runtime linker),它允许你定义在程序运行前 ...

  9. CodeForces 732F Tourist Reform

    边双连通分量. 这题有一点构造的味道.一个有向图,经过强连通缩点之后会形成一个有向无环图. 如果将最大的强连通分量放在顶端,其余的强连通分量都直接或间接指向他,那么这样就构造出了符合要求的图. 接下来 ...

  10. 洛谷P3901 数列找不同 [莫队]

    题目传送门 题目描述 现有数列 A_1,A_2,\cdots,A_NA1​,A2​,⋯,AN​ ,Q 个询问 (L_i,R_i)(Li​,Ri​) , A_{Li} ,A_{Li+1},\cdots, ...