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>
    
     
  • 相关阅读:
    Educational Codeforces Round 86 (Rated for Div. 2) D. Multiple Testcases
    Educational Codeforces Round 86 (Rated for Div. 2) C. Yet Another Counting Problem
    HDU
    HDU
    HDU
    HDU
    Good Bye 2019 C. Make Good (异或的使用)
    Educational Codeforces Round 78 (Rated for Div. 2) C. Berry Jam
    codeforces 909C. Python Indentation
    codeforces1054 C. Candies Distribution
  • 原文地址:https://www.cnblogs.com/fenpho/p/6368478.html
Copyright © 2011-2022 走看看