JS和CSS实现响应式
来源:互联网 发布:淘宝限时秒杀11元 编辑:程序博客网 时间:2024/06/05 02:29
一、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>
二、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>
0 0
- JS和CSS实现响应式
- 响应式布局 css控制和js控制
- CSS实现响应式正方形
- css响应式页面实现
- 使用css及简单的js实现酷炫的响应式slider
- css媒体查询实现响应式设计
- 【译】CSS实现响应式全屏背景图
- CSS实现响应式全屏背景图
- calc()实现CSS响应式布局
- ie兼容响应式布局的实现总结 和 针对ie浏览器的CSS
- 简单js响应式布局实现
- js实现css、addClass、removeClass和toggleClass
- js实现css、addClass、removeClass和toggleClass
- 用CSS和js实现模态框
- 使用CSS和Js实现时钟效果
- 响应式CSS
- 【CSS】响应式图片
- CSS 响应式 补充
- 轻量级ORM框架——第二篇:Dapper中的一些复杂操作和inner join应该注意的坑
- 【解决办法】Hadoop安装完后,启动时报Error: JAVA_HOME is not set and could not be found.
- Ubuntu OpenVPN设置方法图文教程
- Qt Charts_Audio实践
- CentOS 6.6下Redis安装配置记录
- JS和CSS实现响应式
- 点积的应用
- UVA 10462 Is There A Second Way Left?
- 蓝桥杯 操作格子 线段树
- Linux 测试网速
- 深入理解Java 8 Lambda-类库篇
- java的(PO,VO,TO,BO,DAO,POJO)解释
- 用Express的搭建简单路由——李帅醒博客
- 1039. Course List for Student (25)