基本概念

响应式开发在没有媒体查询前，也可以通过js来实现，但是人们基本不会考虑，特别繁琐。在出现了媒体查询，才开始逐渐推广响应式。实际开发中，在时间与金钱充足的情况下还是别做响应式，影响性能，维护麻烦。

基本使用

1、屏幕大于等于480px，使用括号里的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        @media screen and (min-width: 480px) {

            body {

                background-color: black;

            }

        }

    </style>

</head>

<body>

</body>

</html>

2、屏幕小于等于1000px，使用括号里的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        @media screen and (max-width: 1000px) {

            body {

                background-color: black;

            }

        }

    </style>

</head>

<body>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        @media screen and (max-width: 1000px) {

            .header{

                display: none;

            }

        }

        .header{

            width: 100%;

            height: 50px;

            border: 1px solid #304115;

        }

    </style>

</head>

<body>

<div class="header"></div>

</body>

</html>

移动web——媒体查询的更多相关文章

  1. ios web 媒体查询兼容

    原文:https://blog.csdn.net/dear_zx/article/details/82785250 防止链接丢失,复制一下 兼容iphone4/4s: @media (device-h ...

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

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

  3. 响应式web之媒体查询（一）

    HTML4和css2目前支持为不用的媒体类型设定专有的样式,如,一个页面在屏幕上时使用无衬线字体,而在打印时使用衬线字体.screen和print是两种已定义的媒体类型.媒体查询让样式表有更强的针对性 ...

  4. Web移动前端开发-——rem+less+媒体查询，rem+flexble.js+媒体查询

    实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...

  5. iPhone系列设备媒体查询：

    这就引出一个问题,我们在对iPhone设备适配时候,又多出几种情况.iPhone系列设备媒体查询: @media only screen and (min-device-width: 320px){ ...

  6. css3新特性@media(媒体查询)

    现在web页面运行的设备的屏幕从pc端到pad,从pad到手机,各种各样,这样就用到了现在经常用到的响应式页面,为实现响应式页面开发,就用到一个非常有用的css3属性media(媒体查询). 介绍:媒 ...

  7. 关于css3媒体查询和响应式布局

    响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...

  8. CSS：使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

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

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

随机推荐

  1. ZooKeeper实现配置中心的实例（原生API实现）（转）

    说明:要实现配置中心的例子,可以选择的SDK有很多,原生自带的SDK也是不错的选择.比如使用I0Itec,Spring Boot集成等. 大型应用通常会按业务拆分成一个个业务子系统,这些大大小小的子应 ...

  2. 转 java synchronized详解

    转自 http://www.cnblogs.com/GnagWang/archive/2011/02/27/1966606.html Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能 ...

  3. 使用引导扇区维护工具BOOTICE编辑系统启动列表BCD文件

    使用引导扇区维护工具BOOTICE编辑系统启动列表BCD文件 系列文章: 笔记本电脑提速之加装内存条.SSD固态硬盘.光驱位换SSD固态硬盘 笔记本ThinkPad E430c加装内存和SSD固态硬盘 ...

  4. LeetCode 83. Remove Duplicates from Sorted List （从有序链表中去除重复项）

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  5. Android 自己定义圆圈进度并显示百分比例控件（纯代码实现）

    首先,感谢公司能给我闲暇的时间,来稳固我的技术,让我不断的去探索研究,在此不胜感激. 先不说实现功能,上图看看效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...

  6. 解析java中volatilekeyword

    在java多线程编程中常常volatile,有时候这个keyword和synchronized 或者lock常常有人混淆.详细解析例如以下: 在多线程的环境中会存在成员变量可见性问题: java的每一 ...

  7. 【转】关于使用Android6.0编译程序时，出现getSlotFromBufferLocked: unknown buffer: 0xac0f8650问题的解释

    这个问题是在测试leakCanaryTestDemo时发现的,期初看到有点蒙,这个demo中只使用了一个button和一个textView控件进行测试,按理说是不应该出现这种问题,在 网上查找这个问题 ...

  8. AD、DNS、DHCP、IIS、WINS的形象定义及关系

    AD-实际是就是一个包括所有信息的数据库,和现实生活中就将其比作派出所,所有的信息都要进入他那的数据库当中(包括人员姓名(计算机名.账号.密码等) DNS就是建立起关联起好记忆的名称,比如你家的位置用 ...

  9. 使用WCF进行跨平台开发之一(WCF的实现、控制台托管与.net平台的调用)

    WCF是Windows Communication Foundation的缩写,是微软发展的一组数据通信的应用程序开发接口,它是.NET框架的一部分,是WinFx的三个重要开发类库之一,其它两个是WP ...

  10. c#用webkit内核支持html5

    [实例简介]经过测试可用 [实例截图] [核心代码] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 using System; ...