------------------- 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. Laravel artisan commands

    使用php artisan list 可以看到artisan的所有命令以及选项. 当然你也可以在此基础上扩展自己的命令. 1. key 1.1 key:generate 这是一个加密秘钥,用于保证安全 ...

  2. Spring + MyBatis 多数据源实现

    近期,在项目中需要做分库,但是因为某些原因,没有采用开源的分库插件,而是采用了同事之前弄得多数据源形式实现的分库.对于多数据源,本人在实际项目也中遇到的不多,之前的项目大多是服务化,以RPC的形式获得 ...

  3. 无锁的对象引用:AtomicReference

    http://www.dewen.net.cn/q/9588 首先volatile是java中关键字用于修饰变量,AtomicReference是并发包java.util.concurrent.ato ...

  4. selenium 参数传递(testng.xml 、DataProvider )

    为了方便测试代码的复用性,常常采用参数化.传递参数给测试代码 有一下两种方法:1.通过配置XML文件实现.2.通过DataProvider 传递参数. 注意:DataProvider 传递参数返回的是 ...

  5. rabbitmq在centos7下安装

    知识预览 一. RabbitMQ队列 二. 事例 三.基于RabbitMQ的RPC 回到顶部 一. RabbitMQ队列 ? 1 2 3 4 5 #消息中间件 -消息队列   - 异步 提交的任务不需 ...

  6. hdu 1026(优先队列+路径输出)

    Ignatius and the Princess I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  7. MySQL中的内连接、外连接、交叉连接

    内连接(INNER JOIN):   分为三种 等值连接.自然连接.不等连接        外连接(OUTER JOIN):   左外连接(LEFT OUTER JOIN或LEFT JOIN)   右 ...

  8. Go语言标准库之log包

    用来作日志log输出的, 比较易懂. 今天周六啊,在公司加班学习一下呀. package main import ( "log" ) func init() { log.SetPr ...

  9. Druid 架构

    本篇译自 Druid 项目白皮书部分内容( https://github.com/apache/incubator-druid/tree/master/publications/whitepaper/ ...

  10. python版GetTickCount()

    time.clock() return the current processor time as a floating point number expressed in seconds. 即返回一 ...