Rumah > hujung hadapan web > tutorial js > JS实现响应式的简单代码

JS实现响应式的简单代码

PHPz
Lepaskan: 2017-04-03 15:33:38
asal
2263 orang telah melayarinya

一、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-width:980px) and (max-width:1200px)"/>

  <link rel="stylesheet" type="text/css" href="css/index640.css" media="screen and (min-width:640px) and (max-width:980px)"/>

  <link rel="stylesheet" type="text/css" href="css/index320.css" media="screen and (max-width:640px)"/>

</head
Salin selepas log masuk

二、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>
Salin selepas log masuk

 

Atas ialah kandungan terperinci JS实现响应式的简单代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan