文章详情页
css - 桌面WEB应用自适应问题
问题描述
盆友在开发一个桌面GUI应用,使用的是NW.js。由于需求方需哟的页面要求自定义比较多,大量使用提供的图片作为dom元件背景,当时的大小和布局都是写死的。现在需要做桌面上的自适应(不要求适应手机端,就几种桌面分辨率),但是由于很多页面的各个部分都是用背景来展示的(就一个p元素设置好大小然后设置背景图片),很难快速方便地改成自适应,想问一下大家有什么好的办法吗?
问题解答
回答1:宽度可以用百分比,高度可以用vw(Viewport Width),背景图片可以用background-size: 100% 100%;.
比如要实现响应式的正方形,大概可以这样:
.square { width: 30%; height: 30vw; background: url('bg.png') no-repeat scroll center 0 transparent; background-size: 100% 100%;}回答2:
如果是这样的话,能不能整页用transform:scale(倍数);来实现?(当然,这要求你几乎整页都是背景)
回答3:宽度百分比呢,试过没有呢,批量替换掉固定宽度,只要考虑好固定几种分辨率下的容器与元素宽度比例
回答4:如楼上@eechen,如果使用chrome核浏览器,可以使用CSS3的background-size方法;元素大小全部使用50%之类的可缩放指定大小即可;
标签:
CSS
相关文章:
1. js怎样实现在类似qq的联系人分组中进行搜索后,又可恢复原分组的界面?2. python - 如何获取rabbitmq连接的celery的个数3. 上传多图时,最后一张图为缩略图,想设置第一张图为缩略图怎么解决?4. python 中文乱码问题5. javascript - 百度地图一开始设置了中心点,怎么通过按钮在调转到对应的中心点????6. python - 如何将文本文件的CR换行符换成LF换行符?7. Mysql: FIND_IN_SET 的反运算8. 数据库 - Mysql的存储过程真的是个坑!求助下面的存储过程哪里错啦,实在是找不到哪里的问题了。9. mysql优化 - mysql 一张表如果不能确保字段列长度一致,是不是就不需要用到char。10. 怎样用python给mp3添加封面?
排行榜