媒体类型
    1.all 所有媒体
    2.braille 盲文触觉设备
    3.embossed 盲文打印机
    4.print 手持设备 
    5.projection 打印预览
    6.screen 彩屏设备
    7.speech '听觉'类似的媒体类型
    8.tty 不适用像素的设备
    9.tv  电视

媒体特性
    1.(max-width:599px) 
    2.(min-width:600px) 
    3.(orientation:portrait) 竖屏
    4.(orientation:landscape)        横屏
    5.(-webkit-min-device-pixel-ratio: 2) 像素比

关键字
    1.and
    2.not      not关键字是用来排除某种制定的媒体类型
    3.only     only用来定某种特定的媒体类型
         -很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备

01.@media all and (min-width: 600px)

02.{

03.    .box

04.    {

05.        width:100px;

06.    }

07.}

media(适配)的更多相关文章

  1. media适配css

    /*引入适配的less*/ html { font-size: 16px; } @media only screen and (min-width: 320px) { html { font-size ...

  2. @media 适配兼容

    /* 兼容iphone4/4s */ @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ } /* 兼容iphon ...

  3. 移动web之一像素问题

    一.为什么会有一像素问题 弄明白这个问题,首先要知道DPR了. DPR(device pixel ratio)pixel等于picture element.设备像素比,是默认缩放100%的情况下,即D ...

  4. 在移动端实现1px的边框

    由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点 所以 border: 1px 在移动端会渲染为 2px 的边框 与设计图产 ...

  5. 怎样通过css的media属性,适配不同分辨率的终端设备?

    怎样通过css的media属性,适配不同分辨率的终端设备,示比例如以下: <!DOCTYPE html> <html> <head> <title>首页 ...

  6. @media响应式的屏幕适配

    当页面小于960px的时候执行 @media screen and (max-width: 960px){ body{ background: #000; } } 等于960px尺寸的代码 @medi ...

  7. html5移动端适配- media query

    iPad部分css适配 - media query 代码如下图:   注:  @media要放在css最下方,防止被覆盖.  

  8. Css3 Media Queries移动页面的样式和图片的适配问题(转)

    CSS3 Media Queries 摘自:http://www.w3cplus.com/content/css3-media-queries Media Queries直译过来就是“媒体查询”,在我 ...

  9. 媒体查询@media 屏幕适配

    @media(max-width: 1199px){.banner{height: 400px;}}1.6倍@media(min-width: 1200px) and (max-width: 1365 ...

  10. 手机端@media的屏幕适配

    @media only screen and (width: 320px) { html { font-size: 16px; }} @media only screen and (width: 36 ...

随机推荐

  1. SpringBoot学习:整合shiro自动登录功能(rememberMe记住我功能)

    首先在shiro配置类中注入rememberMe管理器 /** * cookie对象; * rememberMeCookie()方法是设置Cookie的生成模版,比如cookie的name,cooki ...

  2. shell 脚本 实现随机数

    现在我想要1~39之间的随机数该怎么做呢? date +%N   显示当前时间的纳秒   可以把这个数用来做随机数 但我只想要1~39的随机数,该怎么办呢 #! /bin/bash # echo $( ...

  3. swagger简单配置

    第一步: 在nuget.org中查找Swashbuckle并下载 在nuget.org中查找Swagger.net.UI,并下载 第二步: 下载完之后,App_Start多了三个文件 Swagger. ...

  4. JVM垃圾收集器(1)

    此文已由作者赵计刚薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 说明:垃圾回收算法是理论,垃圾收集器是回收算法的实现,关于回收算法,见<第四章 JVM垃圾回收算法& ...

  5. MyBatis高级及其SSM框架搭建

    代码生成器 首先meaven项目中导入支持包 <dependencies> <!-- https://mvnrepository.com/artifact/mysql/mysql-c ...

  6. poj做的题

    1699 1080 1170 1239(不错) 1659(读读怎么写)

  7. 深入了解java虚拟机(JVM) 第十二章 类加载器

    一.什么是类加载器 类加载器是一个用来加载类文件的类,Java源代码通过javac编译器编译成类文件,然后JVM来执行类文件中的字节码来执行程序.需要注意的是,只有被同一个类加载器加载的类才可能会相等 ...

  8. ESXi到KVM之v2v迁移

    1.ESXi到KVM之v2v情况说明 (1).配置任务列表: 1)VMwareESXi虚拟平台下linux系统迁移到KVM虚拟平台.2)VMwareESXi虚拟平台下windows系统迁移到KVM虚拟 ...

  9. “全栈2019”Java多线程第四章:设置和获取线程名称

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  10. scrapy实战1,基础知识回顾和虚拟环境准备

        视频地址 https://coding.imooc.com/learn/list/92.html   一. 基础知识回顾     1. 正则表达式 1)贪婪匹配,非贪婪匹配 .*? 非贪婪 . ...