zoukankan      html  css  js  c++  java
  • 响应式布局及其实用类

    所谓响应式布局,就是根据浏览尺寸的不同,做出相应的变化

    其原理是利用 CSS3 的 media queries 判断浏览窗口的尺寸

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Media Queries</title>
     6     <link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap.css">
     7     <script type="text/javascript" src="../../resources/bootstrap-2/js/bootstrap.js"></script>
     8     <script type="text/javascript" src="../../resources/jQuery/jquery-1.12.4.min.js"></script>
     9 
    10 
    11     <script type="text/javascript" src="../../resources/js/html5.js"></script>
    12     <!--解决手机上的显示问题-->
    13     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    14     <!--解决IE低版本问题-->
    15     <!--[if lt IE9]>
    16     <script type="text/javascript" src="../../resources/js/html5.js"></script>
    17     <![endif]-->
    18     <style>
    19         body{
    20             background: #000000;
    21         }
    22         /*当浏览器窗口宽度小于767像素的时候,重新设置样式*/
    23         @media (max- 767px) {
    24             body{
    25                 background: #f00000;
    26             }
    27         }
    28     </style>
    29 </head>
    30 <body>
    31 
    32 </body>
    33 </html>
    响应式布局简单举例

    上面用到了 max-width,其在窗口小于指定值的时候触发,还可以使用 min-width,表示在大于指定值的时候触发

    也可以组合使用,(max-v1) and (min-v2),表示在这个区间内的时候触发样式

    如何把固定样式的布局改成响应式布局呢?

    只需要添加

    <link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap-responsive.css">

    BootStrap已经预先定义好了常用浏览窗口尺寸的处理方式

    • 实用类

    :visible-phone  在手机上显示该元素,其他地方隐藏

    :visible-tablet  在平板上显示该元素,其他地方隐藏

    :visible-desktop 在电脑上显示该元素,其他地方隐藏

    :hidden-phone  在手机上隐藏该元素,其他地方显示该元素

    :hidden-tablet  在平板上隐藏该元素,其他地方显示该元素

    :hidden-desktop 在电脑上隐藏该元素,其他地方显示该元素

  • 相关阅读:
    [导入]郎咸平在复旦大学的精彩演讲
    [导入]郎咸平介绍
    [导入]郎咸平网络文摘 在线交流论坛
    Delphi7,创建 RGB CMYK颜色分量圆 完整代码
    Excel分类汇总/平均/计数的办法
    Word插入 分节符实现多个页码
    Delphi 7中如何修改Form1: TForm1;
    在delphi 7里怎么给已有的单元文件改名
    Mac下安装mysql后无法启动,提示. ERROR! The server quit without updating PID file(就是账户权限不够)
    pip虚拟环境下倒出安装文件,或者批量导入安装。
  • 原文地址:https://www.cnblogs.com/sherrykid/p/5744959.html
Copyright © 2011-2022 走看看