项目可能会运用到不同分辨率的界面上,这里简单说明了根据不同分辨率引用不同的css文件,进而改变页面样式等。
- <script>
- $(function () {
- /** 获取显示屏幕宽度,即分辨率 **/
- var width = document.documentElement.clientWidth;
-
- /** 当宽度大于1920时,引用one.css文件 **/
- if (width > 1920) {
- $("<link>").attr({
- rel: "stylesheet",
- type: "text/css",
- href: "one.css"
- }).appendTo("head");
-
- /** 当宽度大于1600小于等于1920时,引用two.css文件 **/
- } else if (width > 1600 && width <= 1920) {
- $("<link>").attr({
- rel: "stylesheet",
- type: "text/css",
- href: "two.css"
- }).appendTo("head");
-
-
- /** 当宽度小于等于1600时,引用three.css文件 **/
- } else if (width <= 1600) {
- $("<link>").attr({
- rel: "stylesheet",
- type: "text/css",
- href: "three.css"
- }).appendTo("head");
- }
-
- });
- </script>
-