html通过分辨率动态加载css，做响应式页面，响应式和自适应的区别

html通过分辨率动态加载css，做响应式页面

响应式和自适应的区别：

自适应需要写多个页面，响应式只需一个页面即可
自适应通过窗口检测，获取不同的页面；响应式通过窗口检测，在客户端做不同的处理

法1：

head:

<link rel="stylesheet" id="css">

js:

window.onload = function(){if(screen.width > 1366){document.getElementById('css').href = 'css/style1.css';}else((screen.width == 1366) && (screen.height == 768)){document.getElementById('css').href = 'css/style2.css' ;}
};

法2（加载比较快）

head：

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

例子：适配宽屏，平板端和手机端可如下编写

<link rel="stylesheet" type="text/css" media="screen and (min-width:1200px)" href="./css/style1.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-width:1200px)" href="./css/style2.css"/>
<link rel="stylesheet" type="text/css" media="screen and (max-width:768px)" href="./css/style3.css"/>

https://www.foryh.com

html通过分辨率动态加载css，做响应式页面，响应式和自适应的区别相关推荐

javascript动态加载css、javascript脚本方法
1. 动态加载js文件到head标签并执行回调方法调用:dynamicLoadJs('http://www.yimo.link/static/js/main.min.js',function(){a ...
【Jquery】Jquery动态加载css文件
前言很多时候我们需要在页面中引用外部的css文件,下面将介绍一下如何通过Jquery动态加载css文件方式一(Jquery) var cssFileUrl='../css/home.css'; i ...
第二十四节：动态加载JS和动态加载CSS
1.动态加载JS 一般需要用到js,需要将js放到<script></<script>中,一般script放到页面底部:或者在顶部引入外部js. <!DOCTYPE ...
js动态加载css文件和js文件的方法
今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...
ASP.NET动态加载CSS文件
方法一: 通过使页面动态加载不同CSS实现多界面 <%@page language="C#"%> <%@import namespace="System ...
JS判断UA动态加载CSS的方法
项目进度差不多到了调试兼容性的阶段,这时候就会发现移动前端在兼容性方面下的功夫一点也不少于PC端.当初需要兼容低版本IE时还有条件注释可用,现在则只能自己用Javascript去判断了. 由于苹果的强 ...
asp.net动态加载css
谁如果有更直接的方法,请不吝赐教.也不知道.net有什么方法可以直接更换css <%@ Page Language="C#" AutoEventWireup="tr ...
Asp.Net头部动态加载css和js文件的方法
首先head标签上添加runat="server". protected void Page_Load(object sender, EventArgs e) {HtmlGener ...
动态加载javascript和css
动态加载javascript和css 一.动态加载javascript方法 <script type="text/javascript"> var style = do ...

html通过分辨率动态加载css，做响应式页面，响应式和自适应的区别

html通过分辨率动态加载css，做响应式页面

响应式和自适应的区别：

法1：

法2（加载比较快）

html通过分辨率动态加载css，做响应式页面，响应式和自适应的区别相关推荐

最新文章

热门文章