最佳答案:

彩屏设备 和 (最小宽度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. Week 3: Structured Types 5. Tuples and Lists Exercise: odd tuples

    Exercise: odd tuples 5/5 points (graded) ESTIMATED TIME TO COMPLETE: 5 minutes Write a procedure cal ...

  2. BZOJ - 3224 可持久化Treap 树形操作

    这个题目去年就做过了,这次稍微改了一下 都是基础操作 #include<iostream> #include<algorithm> #include<cstdio> ...

  3. B/S和C/S架构简单理解

    B/S和C/S架构简单理解 B/S结构.C/S结构 B(browser浏览器)-S(server服务器),说简单点就是通过浏览器来请求服务器,实现数据交互.那自然了,C(client客户端软件)-S( ...

  4. python--交互器,编译器

    1在写python的时候调交互器的作用 唯一作用:调试代码 2.编译器

  5. Scrum3.0 敏捷开发白皮书

    一.什么是敏捷? 敏捷是一种以用户需求为核心.采用不断迭代的方式进行的软件开发模式.敏捷依靠自组织 的跨职能小团队,在短周期内,做出小块的东西来,通过快速.频繁的迭代,迅速的获取反 馈,进而不断的完善 ...

  6. IE9以下程序开发不兼容项目罗列

    1. 提前关闭iframe,脚本将不再执行 IE下的js不是缓存在站点系统中,而是缓存在每个单独页面系统中的,当关闭页面,对应引入的脚本将不再执行. 可能出现两种情况: iframe引入的html页面 ...

  7. 解决运行vue项目的报错This relative module was not found:

    运行vue项目出现这样的报错. This relative module was not found: * ../../assets/img/spot.png !./src/components/on ...

  8. jvm双亲委派模型

    其实,双亲委派模型并不复杂.自定义类加载器也不难!随便从网上搜一下就能搜出一大把结果,然后copy一下就能用.但是,如果每次想自定义类加载器就必须搜一遍别人的文章,然后复制,这样显然不行.可是自定义类 ...

  9. Vue 项目启动抛出 Error/ No PostCSS Config found in

    项目启动时抛出 Error: No PostCSS Config found in … 的错误表示某个 css 文件不能被引入 解决办法: module.exports = { plugins: { ...

  10. method reference

    import java.util.Arrays; import java.util.List; import java.util.function.Function; import java.util ...