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%}

  • 相关阅读:
    Click: 命令行工具神器
    Pipenv: Python包管理神器
    如何让你的Python程序支持多语言
    Volatile变量
    简单排查java应用CPU飙高的线程问题
    java中的clone
    接口限流
    HTTP协议详解
    [转]nginx 源码学习笔记(十五)—— ngx_master_process_cycle 多进程(一)
    nginx slab内存管理
  • 原文地址:https://www.cnblogs.com/yaotome/p/7127955.html
Copyright © 2011-2022 走看看