zoukankan      html  css  js  c++  java
  • JS和CSS实现响应式

    一、CSS实现响应式

    CSS响应式的实现主要依赖于CSS媒体查询:

    媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,例如:width,height,color。CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身。即通过媒体查询判断屏幕宽度,加载不同的CSS样式表

    代码如下:注意一定要有一个默认样式表不加媒体查询,否则在IE8中访问时会没有样式表。

    <head>
    
      <meta charset="UTF-8">
    
      <title>响应式的演示</title>
    
      <link rel="stylesheet" type="text/css" href="css/reset.css" />
    
      <link rel="stylesheet" type="text/css" href="css/index1200.css" />
    
      <link rel="stylesheet" type="text/css" href="css/index980.css" media="screen and (min-980px) and (max-1200px)"/>
    
      <link rel="stylesheet" type="text/css" href="css/index640.css" media="screen and (min-640px) and (max-980px)"/>
    
      <link rel="stylesheet" type="text/css" href="css/index320.css" media="screen and (max-640px)"/>
    
    </head>

    二、JS实现响应式

    JS响应式的实现也是依托于外联不同的CSS样式表,通过获取不同设备的屏幕宽度,选择性加载不同的CSS样式表。

    <head>
    
      <meta charset="UTF-8">
    
      <title>响应式的演示</title>
    
      <link rel="stylesheet" type="text/css" href="css/reset.css" />
    
      <link rel="stylesheet" type="text/css" href="css/index1200.css" />
    
      <link rel="stylesheet" href="" id="rwdlink" />
    
      <script type="text/javascript">
    
        var rwdlink = document.getElementById("rwdlink");
    
        setCSS();
    
        window.onresize = setCSS;
    
        function setCSS(){
    
          var windowWidth = document.documentElement.clientWidth;
    
          if(windowWidth >= 1200){
    
            rwdlink.href = "";
    
          }else if(windowWidth >= 980){
    
            rwdlink.href = "css/index980.css";
    
          }else if(windowWidth >= 640){
    
            rwdlink.href = "css/index640.css";
    
          }else{
    
            rwdlink.href = "css/index320.css";
    
          }
    
        }
    
      </script>
    
    </head>
    
     
  • 相关阅读:
    ES6/5比较
    Javascript中的var和let
    git中remotes/origin/HEAD指向的分支丢失
    js实用篇之数组、字符串常用方法
    JS设计模式一:单例模式
    Linux C 面试题总结 .
    深入理解javascript原型和闭包(15)——闭包
    一些有意思的面试题(持续更新) .C语言编程技巧札记
    一个三流大学生的北京三年 .
    C 字节对齐.我的算法学习之路
  • 原文地址:https://www.cnblogs.com/fenpho/p/6368478.html
Copyright © 2011-2022 走看看