css宽度自适应的问题

html-css020

css宽度自适应的问题,第1张

1. 用百分比实现 width:50%,这样会根据屏幕的大小来自适应宽度

(插一条calc的属性详解)

vw :Viewport width,即容器(可以是div)的宽度,默认1vw=整个视窗宽度的1%,全屏为100vw。比如视窗宽度为1200px,1vw=120px=1200px*1%,如果是满屏就则为100vw=1200px。

vh :Viewport height,即容器(如div)的高度,默认1vh=整个可视窗口高度的1%,全屏是100vh。

2. calc(100vmin)也可以达到自适应的效果,但还是用起来效果一般

3. calc(100vw - px)  vw是根据屏幕的大小来计算的,屏幕缩小,100vw也会变大

默认高度是没有的,不过由于浏览器本身的bug,如果不用css样式定义body的margin:0,则会大概有2个像素下移。

默认不是居中的,是居左的,用下面这个可以让让居中。

body{margin:0

auto}

那你应该设min-width最小宽度

让所有浏览器都支持min-width的CSS样式代码:

min-width:1000px_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>1000?"1000px":"")

这里的1000和1000px是你需要的数值,注意3个数值的相同