css宽度自适应的问题

html-css010

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也会变大

要通过代码设置，C语言<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>Demo</title> <style type="text/css">

#box { font-size: 4vw}</style></head><body> <div id="box">

我是靖鸣君 我是靖鸣君 我是靖鸣君</div></body></html>

但是该方案存在一个bug，上面的代码，当浏览器窗口变化的时候，box中的文字并没有按照应有的比例变化，但是css3标准中是这么说的：

When the height or width of the viewport is changed, they are scaled accordingly.

是通过百分比来控制宽度；

width:100%通过百分比自适应宽度。注意；此百分比是相对于父级元素宽度。父级元素宽度1000px；子元素设置百分比；是父级元素的百分比；

2.可以通过块状元素自动占满父级的宽度的特性来实现

div默认display:block；不对div设置宽度。div默认占满父级元素的宽度。

3.flex-box布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用于移动端，PC端上面只有高版本的浏览器才兼容，低版本的浏览器是不兼容的。