zoukankan      html  css  js  c++  java
  • 移动web开发之rem布局1

    rem单位

    rem (root em)是一个相对单位,类似于em,em是父元素字体大小。

    不同的是rem的基准是相对于html元素的字体大小。

    比如,根元素(html)设置font-size=12px; 非根元素设置2rem; 则换成px表示就是24px。

    /* 根html 为 12px */
    html {
       font-size: 12px;
    }
    /* 此时 div 的字体大小就是 24px */       
    div {
        font-size: 2rem;
    }

    rem的优势:父元素文字大小可能不一致, 但是整个页面只有一个html,可以很好来控制整个页面的元素大小。

    媒体查询

    什么是媒体查询

    媒体查询(Media Query)是CSS3新语法。

    • 使用 @media查询,可以针对不同的媒体类型定义不同的样式

    • @media 可以针对不同的屏幕尺寸设置不同的样式

    • 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面

    • 目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询

    • 用 @media开头 注意@符号

    • mediatype 媒体类型

    • 关键字 and not only

    • media feature 媒体特性必须有小括号包含

    @media查询类型:

    mediatype
    all --所有设备
    print--打印机和和打印预览
    screen--用于手机电脑屏幕
    

      

    关键字

    关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

    • and:可以将多个媒体特性连接到一起,相当于“且”的意思。

    • not:排除某个媒体类型,相当于“非”的意思,可以省略。

    • only:指定某个特定的媒体类型,可以省略。

     

    媒体特性 :

    width--定义输出设备中页面可见区域的宽度
    min-width--定义输出设备中页面可见区域的最小宽度
    max-width--定义输出设备中页面可见区域的最大宽度
    

      

  • 相关阅读:
    Windows下Android开发环境搭建
    解决Win7下打开或关闭Windows功能空白一片
    C#中得到程序当前工作目录和执行目录的一些方法
    创业者必看的小故事
    Sql Server 2005外围应用应用配置器打不开了怎么办
    vs2005无法Web调试
    SQL Server 全局变量
    转 document.documentElement与document.body
    [转]使用SSMA将Oracle数据库转成SQL Server 2008
    Delphi 2009、C++Builder2009正式发布
  • 原文地址:https://www.cnblogs.com/showlgfcode/p/13688456.html
Copyright © 2011-2022 走看看