zoukankan      html  css  js  c++  java
  • 如何设计响应式布局

    1、在meta标签中添加viewport 

    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />

    2、 不使用绝对宽度(px),使用相对宽度(%)

    3、  不使用绝对文字大小(px),使用相对文字大小(em,rem)

      em相对于父元素字体尺寸比例,rem相对于根元素(html元素)字体尺寸的比例,比如各浏览器默认根元素字体大小为16px,0.75rem就相当于16*0.75=12px。也可以先设置html{font-size:62.5%},设置根元素字体大小为10px,然后再计算各元素的字体大小,如要设置12px就是1.2rem,14px就是1.4rem,25px就是2.5rem,更容易计算。

    4、  媒体查询标签

      自适应网页设计的核心,就是CSS3引入的media query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的css文件。

    <link rel=”stylesheet” type=”text/css” media=”screen and (max-400px)” href=”tinyScreen.css”/>

      上面代码的意思是,如果屏幕宽度小于400像素(max-400px),就加载tinyScreen.css文件。

    <link rel=”stylesheet” type=”text/css” media=”screen and (min-400px) and (max-600px)” href=”smallScreen.css”/>

      如果屏幕宽度在400像素到600像素之间,则加载smallscreen.css文件。

    5、  图片的自动适应

      除了布局和文本,自适应网页设计还必须实现图片的自动缩放

    img{max-width:100%}
    img{min-width:100%}

      老版本的IE不支持max-width,所以只好写成img{100%}

  • 相关阅读:
    MapXtreme 2005
    QQ在线源码
    Oralce rowid
    MOSS2007 安装与部署(下)
    MapXtreme 2005新增内容
    MOSS 2007安装与部署(上)
    PL/SQL中的where子句比较
    Oracle中插入日期型数据
    在HTML语言网页中加载视频的代码
    HTTP 错误 500.24 Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.NET 设置。
  • 原文地址:https://www.cnblogs.com/yaotome/p/7127955.html
Copyright © 2011-2022 走看看