怎么样在css里根据设备/平台来适配不同的样式？

5dhtml · 发表于 2019-6-14 10:01:30

本帖最后由 5dhtml 于 2019-6-14 10:02 编辑

我发现PC上goldendict和安卓上比如欧路对css的解析有时候有无法接受的差异，导致同一个词典在不同设备显示有问题，我对CSS、HTML之类的是外行，只会根据别人的CSS做一些简单的修改，我看到FF大佬制作的词典里似乎有根据平台来适配,但是自己实际测试却无效，这是什么原因呢？我感觉要根据设备适配总得根据useragent什么的吧，像这样直接写可以吗？

FF的collins词典

/* set automatically by script embedded in HTML */
.windowsnt.goldendict{
font-size: 120%;
}
.windowsnt.goldendict .word_entry{
margin-top: 20px;
}
.windowsnt.goldendict .tab_multiwords{
margin-bottom: -20px;
}

复制代码

LDOCE5：

.mobile .lm5pp_popup {
bottom: 50px;
right: 10px;
}

复制代码

ogrishman · 发表于 2019-6-14 15:14:42

直接这样写不行，想要让您的词典在不同平台都显示的很好，需要针对不同平台写特定的CSS，但是仅仅用CSS是不行的，要配合 JavaScript。一般做法是这样的：
比如你的一个词条HTML是这样的：


apple
a round fruit

在 JavaScript里根据 useragent 判断当前是什么平台，然后用 JavaScript 给 加上一个特定的 class, 比如是 Windows 平台，可能最后结果是 。然后在 CSS 里面就可以用类似您示例中的CSS来针对Windows平台写一些特定的样式了：

p#entry.windows {
....
}

我有点印象F大大的词典好像就是这么做的，您可以参考看看。

deeke · 发表于 2019-6-14 15:25:58

简单的办法就是根据屏幕宽度来判断。

.wordhead { padding-bottom: .2875rem; word-break: break-all; border-bottom: .08rem dashed #002047; }
@media screen and (max-width: 480px) { .wordhead { border-bottom: .08rem dashed transparent; } }

复制代码

更进一步的解决办法是 “自适应设计” 或 “弹性设计”，要看 CSS 的书。

[求助] 怎么样在css里根据设备/平台来适配不同的样式？

评分

本帖被以下淘专辑推荐:

点评

点评