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>
    
     
  • 相关阅读:
    软件工程——第一次作业
    软件工程结对编程第二次作业
    软件工程结对编程第一次作业
    软件工程第三次作业
    软件工程第二次作业
    软件工程第一次作业
    阿里云服务器ECS WindowsServer2016配置IIS遇到的坑
    微信小程序跳坑指南——小程序上线半年后遇到的坑总结
    VS2013 RC 此模板尝试加载组件程序集 “NuGet.VisualStudio.Interop, Version=1.0.0.0, Culture=neutral.........
    Mysql主从复制原理及配置
  • 原文地址:https://www.cnblogs.com/fenpho/p/6368478.html
Copyright © 2011-2022 走看看