2
/6
在test.html文件内,使用div标签创建一行字符,用于测试。
3
/6
在test.html文件内,设置div标签的class属性为strdiv,用于下面设置样式。
4
/6
在test.html文件内,编写<style type="text/css"></style>标签,页面的css样式将写在该标签内。
5
/6
在css标签内,通过class设置div的样式,定义其宽度为200px,背景颜色为灰色,并将text-align属性设置为justify,text-align-last属性设置为justity,实现每个字符宽度一样。
6
/6
在浏览器打开test.html文件,查看实现的效果。
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也会变大