zoukankan      html  css  js  c++  java
  • 利用JS去做响应式布局

    利用JS去做响应式布局
    js动态改变布局方式
    // 取浏览器可视区高宽 var lw = $(window).width(); var lh = $(window).height();
    // 页面加载完毕后执行 $(function () {     // 加载完毕后设置body的高度和宽度     $(document.body).css({ "width": lw, "height": lh });     // 新的高度 = lh - (Navigation + Footer + Banner)     // 如果没有 Banner 可以不加     $(".Content").css("height", lh - 90); });
    // 当窗口高宽改变时触发 $(window).resize(function () {     // 取窗口改变后的高度和宽度     var rw = $(window).width();     var rh = $(window).height();
        // 重置body的高度和宽度     $(document.body).css({ "width": rw, "height": rh });
        // 新的高度 = rh - (Navigation + Footer + Banner)     // 如果没有 Banner 可以不加     $(".Content").css("height", rh - 90); });
     
    两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件:
    <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min- 400px)">
    意思是当屏幕的宽度大于等于400px的时候,应用styleA.css
    在media属性里:
    screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)(min- 400px) 就是媒体特性,其被放置在一对圆括号中。
    <link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min- 600px) and (max- 800px)">
    意思是当屏幕的宽度大于600小于800时,应用styleB.css
    另一种方式,即是直接写在<style>标签里:
    @media screen and (max- 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
      .class {
        background: #ccc;
      }
    }
    写法是前面加@media,其它跟link里的media属性相同。
    Max Width
    下面的样式会在可视区域的宽度小于 600px 的时候被应用。
    @media screen and (max- 600px) {
      .class {
        background: #fff;
       你的样式
      }
    }
    Min Width
    下面的样式会在可视区域的宽度大于 900px 的时候被应用。
    @media screen and (min- 900px) {
      .class {
        background: #fff;
      }
    }
    Multiple Media Queries
    你还可以使用过个匹配条件,下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。
    @media screen and (min- 600px) and (max- 900px) {
      .class {
        background: #fff;
      }
    }
    --------------少年不努力,长大搞程序。欢迎关注,如有错误,恳请指正。
  • 相关阅读:
    3D Bezier Curve, Matlab Code
    Matlab Bezier
    python与matlab混合编程
    Matlab P文件——加快Matlab程序,保护你的算法(z)
    Simens NX (原UG)内部代码逆向分析 / Inner code Reverse analysis of NX software
    Matlab扩展编程
    《数值分析及其MATLAB实现》(任玉杰)扫描版[PDF]
    NURBS Toolbox by D.M. Spink (matlab)
    贝塞尔曲线
    BSpline & NURBS (Matlab Code)
  • 原文地址:https://www.cnblogs.com/oycyqr/p/8806907.html
Copyright © 2011-2022 走看看