“弹性界面”已经发布一段时间了,这里给大家罗列一些编辑小技巧,用于适应新的版面编辑。
"百分比"替换"数值"[]
关于界面的宽度,百分比将替换数值。比如表格:
之前:
{| style=“width:670px;” |- |Example |}
调整之后:
{| style=“width:100%;” |- |Example |}
只要简单地将“670px”替换成“100%”将解决所有问题。
不过,需要注意的是,百分比必须根据它的第一层版面而调整。如下图所示:
背景页面为1270px(即100%),红色区域为90%即为背景版面的90%,而黑色区域50%即为红色区域的50%。如果背景页面不再是100%,那么红色和黑色区域的宽度都会相应的调整。如果调整红色区域的百分比,那么黑色区域的宽度比例也会有所改变。
同时需要注意的是,如果在代码中添加padding或者border,就必须调整百分比。如果还使用100%,方框就会变大而越界,如下图绿色区域所示:
主页右栏[]
弹性界面已经将主页右侧的宽度从330px更改为300px。大多数的方框可以设置为“300px”或者“100%”。在低分辨率的状况下,文章页的右侧栏目将移到左侧内容栏的下方。
如果图片册在右方,在编写代码的时候,会被自动设置为300px的宽度;但实际的宽度为310px,所以你需要将宽度调整为290px才不会遮盖图片并且显示正常,如下面红色区域所示:
表格[]
尽量避免在主页上使用表格。
表格是用来展示数据使用,而不是用于图片的展示。如果将表格用来展示图片或者某种设计,如下图所示,将出现滚动条,非常不美观。
目前表格在弹性界面上的呈现状态并不是非常好。
如果你一定想使用表格展示,可以使用HTML进行修饰,比如:
<div style="margin: 0 auto; text-align: center;"> <div style="display: inline-block;">[[File:Example.jpg|150px|Example]]<br /> Example caption</div> <div style="display: inline-block;">[[File:Example.jpg|150px|Example]]<br /> Example caption</div> <div style="display: inline-block;">[[File:Example.jpg|150px|Example]]<br /> Example caption</div> <div style="display: inline-block;">[[File:Example.jpg|150px|Example]]<br /> Example caption</div> <div style="display: inline-block;">[[File:Example.jpg|150px|Example]]<br /> Example caption</div>
之后会呈现出这样的效果:
这种方法只建议拥有html高级编程能力的用户使用。
图片和视频[]
百分比的使用并不适用于图片尺寸的变更,所以请记住:图片依然使用尺寸进行展示,比如“350px”。
在一个600px宽度的区域内,将宽度改成100%并不会让宽度成为600px,而是会变成图片本身的尺寸。
请试图将尺寸调整为屏幕显示的最低尺寸。
如果屏幕能够显示的最低宽度为700px,你插入了一张800px的图片,这张图片在低分辨率的屏幕上将不能正常显示。
标题(Header)[]
如果你希望在内容栏里面放上标题,一定确保标题的宽度为100%。
百分比并不适用以文件的形式([[File:]]进行呈现的代码适用,比如[[File:Header|100%]]并不适用,这点和图片一样。请使用带有<div>的HTML进行编辑。
如果你希望使用带阴影的标题,一定记得阴影部分也是被算入尺寸之内的。编辑的时候记得不要让阴影部分超出了页面的宽度,如下图所示:
背景分割[]
如果你不希望分割背景,记得将背景图片的宽度设置为2000px。
小于2000px宽度的背景图片在“我的工具”-“界面设计”中将不会显示“split”(分割)。
背景图片的尺寸将由最小限制150KB增大至300KB。