Pc端同一分辨率下,不同浏览器显示效果不同,如何做适配?

目前是尺寸固定的内容放在尺寸固定的区域内,虽然周围边距在不同浏览器中显示效果有差异,但不影响页面整体效果。

:face_with_monocle:我个人测试认为字体大小不同应该是跟用用户的浏览器设置的字体大小与字体有关。
解决方案:css设置 字体字体大小
就如,搭建网站前css抹平浏览器差异一样。。。
:laughing: 如果我的测试结果有什么问题,我们一起讨论哈。

测试如下

测试环境
系统:win7
屏幕大小:1920 * 1080
浏览器:360安全浏览器 及 谷歌浏览器

出厂设置 默认浏览器为都为16px


结果:基本无差。

只改变 360浏览器或谷歌设置为14px


结果:360浏览器变小(只上了360的变小图),谷歌同理。
结论:如果没有设定字体大小,浏览器会根据用户设置的字体大小来设置页面字体。

css 直接磨平差异
此时 将两个浏览器都设置为14px
css 设置 font-size:16px;


结果:字体大小与1图一致

在1920 * 1080分辨率下,各个浏览器屏幕大小也不一样,



假如根据1600*900的设计稿,有没有好的适配方法?

用css去设置字体,试一试可以吗。


字体都是16px,红色容器的尺寸也一样,感觉360上面看着比谷歌要小气。我想问的是pc端能否有像移动端那样rem的适配,在不同屏幕大小看着比例是协调的:blush:

可以。引入手淘布局的rem插件,然后设定好基准值就能够达到在不同屏幕大小自适应的效果。



像这样布局的页面,目前就是把中间那块内容宽高定死,但是在不同浏览器的周围边距有差异,虽然不影响整体,您有更好的方式吗?:money_mouth_face:

尝试一下vw和vh这样的单位试试看?

:cold_sweat: 我这边很少写PC端,不知道能不能帮上您,您尝试下百分比,看看能不能解决这个问题?

原来是百分比效果不好,后来固定死了:face_with_monocle:

pc端兼容这单位吗:wine_glass:

随便打听下你ps能力怎么样:hear_no_evil:

自己百度一下兼容性表就好咯:
https://caniuse.com/#feat=viewport-units

PC端的话,绿色支持,红色不支持

好的:100::100::100::100::100::100::100::100::100::100::100:偷偷问一下你会ps不会:grinning:

你这个是笔记本的屏幕缩放125%了吧

win7 分辨率1920*1080没有缩放:smiley:

:expressionless: 简单切个图还凑活。

差不多:100::100::100::100::100:

以前的显示器有问题,换了一个主机差别不大了