css控制页面再不同分辨率下显示相对大小

html-css014

css控制页面再不同分辨率下显示相对大小,第1张

这个可以通过布局和样式解决：

方法一：所有布局用百分比布局，这种方法是比较传统的。

方法二：百分比和em（一个字符的单位）相结合的；

方法三：rem为单位来写样式，需要借助JS来根据分辨率的大小调整rem

方法四：布局用rem单位，而字体用em.

第1、2两种方法是比较传统，网上随便搜搜就找得到了；第3种开始用到的rem，rem是css3新出的一种样式属性单位，类似PX；但是rem是可以人为设置大小的，也就是说rem这个单位的大小是可以设置,基于这个特性，再通过JS来根据分辨率控制这个rem的单位大小；

JS代码：

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth

if (!clientWidth) return

docEl.style.fontSize = 40 * (clientWidth / 1080) + 'px'

console.log(40 * (clientWidth / 1080))

}

if (!doc.addEventListener) return

win.addEventListener(resizeEvt, recalc, false)

doc.addEventListener('DOMContentLoaded', recalc, false)

})(document, window)

这边的40是rem的自己需要单位大小（自己根据需求设置的，如果需要甚至可以改成10）；

这边的1080是设计效果图的大小，如果设计图是以宽度为2000的话，那么这边的1080就改成2000；

而em用来做字体单位的话，就可以根据不同的显示器（手机自身的设定）来显示字体，不会出现字体大的离谱，或者小的看不见的状况；

不过rem因为是CSS3的属性，在PC端的兼容性很差，不建议使用，但是移动端是非常适合的，总结就是PC端：方法一、方法二，移动端：方法三、方法四

根据不同分辨率或不同窗口大小加载不同的css，让网页显示最合适的布局，是网站设计常用到的。

一、根据屏幕分辨率大小加载不同CSS.

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<link href="" rel="stylesheet" type="text/css" id="css" /><!--备注：这里写一个带ID="css" 的空的link样式-->

<script>

var w=window.screen.width//先获取屏幕分辨率大小

var c

if(w==1280){

c="a.css"

}else if(w==1024){

c="d.css"

}else if(w==800){

c="c.css"

}else{

c="d.css"

}

document.getElementById("css").href=c

</script>

</head>

<body>正文</body>

</html>

二、根据浏览器窗口大小加载不同CSS

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<link href="" rel="stylesheet" type="text/css" id="css" /><!--备注：这里写一个带ID="css" 的空的link样式-->

<script>

var w=document.documentElement?document.documentElement.clientWidth:document.body.clientWidth//先获取窗口宽度

var c

if(w>=1280){

c="a.css"

}else if(w>=1024){

c="d.css"

}else if(w>=800){

c="c.css"

}else{

c="d.css"

}

document.getElementById("css").href=c

</script>

</head>

<body>正文</body>

</html>