html5 - 做PC的全屏页面的时候,该怎么设计这个页面在所有屏幕分辨率上不变形?
迷茫
迷茫 2017-04-17 14:41:57
[HTML讨论组]

1.要做一个全屏滚动的页面,每个页面内容都比较多,现在我都是宽高百分比显示,但是文字没法缩放,会使页面有些乱。
2.ui做的界面是1920*1080的。

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(4)
ringa_lee

采用rem定义字号。同时配合媒体查询

PHP中文网

简单的响应式media属性,想一些字体,内外边距的单位可以换成rem比较好控制

ringa_lee

首先 rem处理自适应布局是不错
但是 rem不兼容IE9以下
兼容性要求高的话 写了也白搭
其次 移动端用rem布局的时候,文字一般也不用rem,因为由于不同的rem计算方式会产生很多奇怪的大小,使得文字出现糊掉或者模糊的情况,通常使用媒体查询事先设置好body的字体大小,这样来确保文字的正常显示,然后用em控制

至于题主说的是pc端
前端的页面基本不需要自适应大小,毕竟浏览器都有放大功能,不过在高分辨率屏幕下,感觉现在页面的字体确实太小
所以 如果涉及到因为字体问题 使得布局糊掉的话
建议题主还是使用media query 媒体查询来设置在不同分辨率下的字体大小吧;

巴扎黑
可以设置背景图片居中对齐,不要限定100%,这样不是最佳。
也可以用css3 media媒体查询器。
顺便推荐一个做全屏页面的插件fullPage.js

http://www.jq22.com/jquery-in...

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号