1、根据不同分辨率来调用不同css样式
可以使用@media查询来根据不同分辨率调用不同css样式。
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> .abc { height: 300px; border: 1px solid #000; margin: 0 auto } //可以去掉边框 @media screen and (min-width: 1201px) { .abc { width: 1200px } } /* css 注释说明:设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ @media screen and (max-width: 1200px) { .abc { width: 900px } } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ @media screen and (max-width: 900px) { .abc { width: 200px; } } /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */ @media screen and (max-width: 500px) { .abc { width: 100px; } } /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ </style> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> </head> <body> <div class="abc">DIVCSS5实例:我这个DIV宽度会随浏览器宽度变化哦,试试改变浏览器宽度</div> </body> </html>
2、根据不同浏览器类型来调用不同css样式
思路:
先引入公共基础样式;
通过window.navigator.userAgent获取浏览器标志;
通过indexOf进行指定浏览器的标志查找;
若查找的结果不为-1就引入相应的css。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/base.css" /> </head> <body> <div id="scroll-bar"></div> <script type="text/javascript"> function getBrowser() { var ua = window.navigator.userAgent; var isIE = window.ActiveXObject != undefined && ua.indexOf("MSIE") != -1; var isFirefox = ua.indexOf("Firefox") != -1; var isOpera = window.opr != undefined; var isChrome = ua.indexOf("Chrome") && window.chrome; var isSafari = ua.indexOf("Safari") != -1 && ua.indexOf("Version") != -1; if (isIE) { return "IE"; } else if (isFirefox) { return "Firefox"; } else if (isOpera) { return "Opera"; } else if (isChrome) { return "Chrome"; } else if (isSafari) { return "Safari"; } else { return "Unkown"; } } var linkNode = document.createElement("link"), scriptNode = document.createElement("script"); linkNode.setAttribute("rel","stylesheet"); linkNode.setAttribute("type","text/css"); scriptNode.setAttribute("type", "text/javascript"); if(getBrowser()=="IE"){ linkNode.setAttribute("href","css/index-ie.css"); scriptNode.setAttribute("src", "js/index-ie.js"); }else if(getBrowser()=="Firefox"){ linkNode.setAttribute("href","css/index-firefox.css"); scriptNode.setAttribute("src", "js/index-firefox.js"); }else if(getBrowser()=="Opera"){ linkNode.setAttribute("href","css/index-opera.css"); scriptNode.setAttribute("src", "js/index-opera.js"); }else if(getBrowser()=="Chrome"){ linkNode.setAttribute("href","css/index-chrome.css"); scriptNode.setAttribute("src", "js/index-chrome.js"); }else if(getBrowser()=="Safari"){ linkNode.setAttribute("href","css/index-safari.css"); scriptNode.setAttribute("src", "js/index-safari.js"); } document.head.appendChild(linkNode); document.head.appendChild(scriptNode); document.getElementById("scroll-bar").innerHTML = "您的浏览器是:"+getBrowser(); </script> </body> </html>
© 著作权归作者所有
举报
发表评论
0/200