扫码关注官方订阅号
比如做的页面是固定尺寸640px(包括背景图片等都是固定尺寸), 如何让其在320px尺寸的手机上显示为320px大小?也就是字体图片等都为正常的50%,而不出现滚动条等?
更新:不是想要bootstrap那种使用@media的响应式布局效果,想要的是单纯的显示页面大小的50%。
学习是最好的投资!
配置viewport 例如:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
用Bootstrap框架,有一套响应式设计的css样式的,依次响应小型、中型、大型设备的屏幕尺寸。
width:100%不就行了吗?
所有的东西都变成相对的,元素长宽,字体大小,啥啥都是相对的。 相对的最终父元素却是绝对的,长宽可以自动获取屏幕的100%,可是字体大小呢? html和css没有那么智能和自动的,还是需要手动用媒体查询去设置每种分辨率下的html字体大小,不然他咋知道该是什么字号。。。
现在比较流行的做法是使用rem作为单位,然后动态的改变rem对应的px值来达到目的(js监听resize事件,或者写用媒体查询) 当然更为暴力的做法,你可以直接使用zoom,计算好缩放比后设置。
使用viewport应该是可以的
请使用响应式布局
单位 VW/VH
用bootstrap
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
配置viewport
例如:
用Bootstrap框架,有一套响应式设计的css样式的,依次响应小型、中型、大型设备的屏幕尺寸。
width:100%不就行了吗?
所有的东西都变成相对的,元素长宽,字体大小,啥啥都是相对的。
相对的最终父元素却是绝对的,长宽可以自动获取屏幕的100%,可是字体大小呢?
html和css没有那么智能和自动的,还是需要手动用媒体查询去设置每种分辨率下的html字体大小,不然他咋知道该是什么字号。。。
现在比较流行的做法是使用rem作为单位,然后动态的改变rem对应的px值来达到目的(js监听resize事件,或者写用媒体查询)
当然更为暴力的做法,你可以直接使用zoom,计算好缩放比后设置。
使用viewport应该是可以的
请使用响应式布局
用bootstrap