最佳答案:

彩屏设备 和 (最小宽度768px) 和 (最大宽度959px)

仅限 彩屏设备 和 (最小宽度480px) 和 (最大宽度767px)

在你发的代码中其实没有什么不同,用起来效果都是一样的。

下面这样用only才有效果:
@media all and (min-width:xxx) and (max-width:xxx){
/*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/
} @media only screen and (min-width:xxx) and (max-width:xxx){
/*上面针对了所有设备,这段是只(only)针对彩色屏幕设备*/
}

原文:https://zhidao.baidu.com/question/1988207125664534747.html

媒体查询,screen and 和only screen and有什么不同的更多相关文章

  1. 移动WEB开发中媒体查询里的width, device-width, resolution

    /*1.width: viewport的宽度,css像素,三星S3的viewort默认宽度是980px. 当设置viewport width=device-width时,对应的媒体查询中width的值 ...

  2. 移动设备上的媒体查询 CSS media queries for mobile device

    CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...

  3. CSS Media媒体查询使用大全,完整媒体查询总结

    前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...

  4. 媒体查询ipad,pc端

    媒体查询 /* 判断ipad */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ ...

  5. Bulma 中的媒体查询

    在 Bulma 中将设备分为 6 类:手机.平板.触屏设备.桌面.宽屏和大屏.提供了四个阈值. // sass/utilities/variables.sass $tablet: 769px !def ...

  6. 关于媒体查询 @Media Screen 与响应式

    其实CSS2中已经有了媒体查询的概念,但是CSS3中媒体查询功能更加的强大! 首先,我们来看一个小例子 设置媒体查询的 Max Width ,改变窗口大小到600px的时候就会触发一下代码: @med ...

  7. html自适应布局,@media screen,媒体查询

    html自适应布局,@media screen,媒体查询 自适应代码示例: <!doctype html> <html> <head> <meta chars ...

  8. CSS3 @media 查询,根据屏幕screen大小调节前端显示;媒体查询方法的使用

    ------------------- 1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) an ...

  9. 媒体查询(pc端,移动端不同布局)

    媒体查询语法: 1.内联写法:and之后必须有空格@media screen and (min-width:960px //判断浏览器大小条件){body{background:red} //常规的样 ...

  10. 深入理解CSS Media媒体查询

    × 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...

随机推荐

  1. Scala构建工具sbt的配置

    时间是17年12月24日.初学Scala,想使用它的标配构建工具sbt,结果好大一轮折腾,因为公司隔离外网,需要内部代理,所以尤其折腾.下面的配置参考了好多篇不同的文章,已经没法一一留下出处了.而且还 ...

  2. ButtonAddListener监听按钮点击事件

    ButtonAddListener监听按钮点击事件 using UnityEngine; using System.Collections; using UnityEngine.UI; using U ...

  3. C#中if和#if区别

    if的作用是程序流控制,会直接编译.执行.#if是对编译器的指令,其作用是告诉编译器,有些语句行希望在条件满足时才编译. --------------------------------------- ...

  4. 牛客网Java刷题知识点之TCP、UDP、TCP和UDP的区别、socket、TCP编程的客户端一般步骤、TCP编程的服务器端一般步骤、UDP编程的客户端一般步骤、UDP编程的服务器端一般步骤

    福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑         Java全栈大联盟   ...

  5. 基于 jdk1.7 发布一个 WebService 服务

    1 服务端的发布 第一步: 创建一个 Java 项目第二步: 创建一个类, 加入 Webservice 注解第三步: 提供一个方法 sayHello第四步: 在 main 方法中调用 jdk 提供的发 ...

  6. ElasticSearch 2.1.1学习及总结

    Install & Up cd elasticsearch-2.1.1/bin ./elasticsearch ./elasticsearch --cluster.name my_cluste ...

  7. 1.2 js基础

    1.onchange    99%用到select上边. 2.js是干什么的,修改css样式和属性   3.选项卡步骤   1.获取元素 2.循环给按钮加自定义属性 3.循环给按钮加事件   4.封装 ...

  8. [實現DDD] 第10章 聚合(1)設計原則

    聚合只是將一些實體(Entity)與值對象(Value Object)聚集起來的對象樹嗎?? 有些途徑可能使我們設計出不正確的聚合模型, 如:可能為了對象組合上的方便而將聚合設計的很大;也可能設計的聚 ...

  9. mavne 工程jsp页面首行报错

    在pom.xml文件中加入servlet依赖 <dependency> <groupId>javax.servlet</groupId> <artifactI ...

  10. Python 递归返回树形菜单JSON串 <flask>

    需求:菜单管理功能(增.删.改),多级树形菜单展示 数据库表设计 create table if not exists Menu( id serial primary key , title ) no ...