css怎么实现无论电脑多大的分辨率 网页拖拉显示都是全屏呢

html-css056

css怎么实现无论电脑多大的分辨率 网页拖拉显示都是全屏呢,第1张

纯css实现不到那个程度,

因为,你想象,

在body里放一个div------让这个div无论何时都100%显示(里面要有内容不然显示不了,比如<img>,<p>,他们的长宽参数也设置成100%或者70%等等)-

当浏览器窗口长宽变化时,div和里面的内容总是跟着动的,这能做到(电脑屏幕如果只有800,那网页就会自动变长),但是要注意这绝对满足不了‘全屏’的要求,拉伸了面积,但是字号、边框宽度都是不变的,所以等于是在改变layout。

如果要做这个效果的话(拉伸浏览器、实时拉伸里面的内容使之永远‘全屏’):

在以前多是选择做成一个大的flash,100%的长宽贴在网页上,调一些scale参数(方便),

现在flash变的不那么流行了你可以用javascrip实现(有点麻烦,很少见到这样实现的),

或者html5的canvas能够达到此效果(可惜ie8以下就别想兼容了)

只有内嵌css有效,外部css会出现拉伸的情况,

所以有两种方案

var myCanvas = "<canvas id='myCanvas' width='" + screen.availWidth + "px' height='"+ screen.availHeight + "px'></vanvas>"

document.body.insertAdjacentHTML("beforeEnd", myCanvas)

或者这种做法

var myCanvas = document.createElement("canvas")

myCanvas.setAttribute("width", screen.availWidth)

myCanvas.setAttribute("height", screen.availHeight)

myCanvas.setAttribute("id", "myCanvas")

document.body.appendChild(myCanvas)

两种方案的共性都是在把元素添加进DOM前设置他的大小

估计是没分了,给后人看吧