最近在wiki改的一些css小问题总结


前言

最近在bwiki搬砖,主要是建建模板和搬运游戏内容的工作,不是很难但工作量比较大,查询会写了之后发现用到的东西虽然在网页显示比较美观,但是到手机上却完全没有适配或者只有简单的隐藏显示,用样式(.hidden-xs)控制的情况。有点头疼,于是试着着手在自己用的模板里改样式表。

由于改写的前一个大佬的相册模板出现了不知如何控制隐藏背景的问题,遂请教,结果发现这个是用小工具控制的,并不是css,更糟的是这段是从一个编辑传到另一个编辑手上,经过多方改写的“祖传代码”,初创大佬比较忙联系不上Orz果然不懂得代码不要瞎猜瞎抄。等过几天自己重写吧。

对齐方式

某页面是用多个div包裹图标,自动排列的列表,在大屏幕上显示毫无问题,但是会在个别小屏幕上(比如模拟三星某款屏幕尺寸就会,苹果某款就不会)出现对齐不一致的问题……用了火狐的响应式设计模式(每次用久了就鼠标失灵,吐槽)反复拉屏幕尺寸推测是父元素尺寸过小导致挤压造成的。最后通过减小width和加一行强制对齐(vertical-align:text-top;)解决。

以下为异常页面图:
异常页面图1

异常页面图2

另:群里大佬推荐了一篇flex布局的教程,写得很清晰、易懂、全面,留待学习。Flex 布局教程:语法篇 – 阮一峰的网络日志

@media

不得不说通过@media (max-width: 400px)进行小屏适配非常简单粗暴有效,没接触过的都能看懂。虽然如果一开始就能将布局做的自动灵活才是上上策,而用这种方式没写好的话往往会造成图片等尺寸突变的情况,拉屏幕测试的时候非常不美观。不过个别情况下确实是利用@media将大小屏幕样式分离独立或许更为明智。
例如,某页面有个表格需求,大屏幕版左侧占了整列的单元格用来放置游戏中的入口图片,同时作为进入角色页面的入口,自觉是比较美观实用的,但小屏幕版如果仍用游戏原入口图就显得文字信息被挤占,图文占比不合适了。所以我最终选了小屏幕换成最上方加一行角色信息,用图标+超链接作为角色页入口。

手机屏幕版(瘦长)

手机屏幕版

网页版(较宽)

网页版

尺寸单位

px、em、%这些都在学习的时候有了解过,近来看其他大佬的样式发现了vw、vh这两个非常实用的单位。
其中%这个单位使用时有一点很容易疏忽,就是它是受父元素尺寸直接影响的,很多时候div套div套多了,又给某一层设置了尺寸,再设子元素%尺寸的时候很容易出现把%直接当成整个页面%的低级错误。
vw则是可视范围宽度(View width),非常适合子元素与父元素之间比例联系不直观,或者设计者目标是直接以屏幕宽度为标尺的情况。非常好用。

发表评论

 

本站评论经审核后才能显示,见谅。