Heim > Artikel > Web-Frontend > 手机 web 适应 各种屏幕,不出现上下和左右的滚动条 大神们来帮忙了_html/css_WEB-ITnose
rt
现在有一个手机web , psd 设计稿是 640x1130 (w/h) 的, 现在要求是能在各种大小屏幕的手机里,不出现滚动条, 设计稿里的图片和按钮不被拉长和压扁,就是要等比缩放;
我第一次的做法就是 width:100%, height:100% 然后计算设计稿的图片占的百分比写的css 样式,在不同的手机里,页面里元素均出现不同的拉长或压扁 ,被打回重做
我现在的思路是 在 body 里先做一个 长宽比为 1136/640 的容器,然后把页面中的元素在这个容器里,在按百分比布局,现在问题是 这个1136/640 的容器,什么时候给他设置长宽比? 我的实现步骤就是用 zepto.js
$(document).ready(function(){ // code //...在屏幕中间,取出一个面积最大的 1136/640的容器,然后使其居中,左右留白})
请搜 响应式设计
简单的
复杂的用css媒体查询试试
@ 二楼, 三楼
这些都有的,我有接触, 但是目前市面这么多手机,媒体查询 如何是好啊
可能是我没把问题描述清楚:
psd 设计稿只有 640 x 1136 (wxh), 要求是
1.设计稿中的内容全屏显示,允许左右留白,下方留白
2.不能出现滚动条
3.在各种不同尺寸的手机上,设计稿的元素不能被压缩 拉伸,实现等比缩放
如下图, 如果响应式设计、 媒体查询能够实现的话,该怎么设置分界点,麻烦讲一下详细的步骤,谢谢
用js计算吧,设备高度减去头尾高度就是内容区域的高度了,设备宽度即内容区域宽度,然后按设计图的图片比例,计算到底是宽度较小还是高度较小(比如图片宽高比例2:3,即使内容区域尺寸为220:300,仍然认为是高度较小),然后以较小的那个尺寸计算图片尺寸即可(比如按高度计算,则不设置宽度令其自动缩放)
至于居中这些,相信不会有难度
用js计算吧,设备高度减去头尾高度就是内容区域的高度了,设备宽度即内容区域宽度,然后按设计图的图片比例,计算到底是宽度较小还是高度较小(比如图片宽高比例2:3,即使内容区域尺寸为220:300,仍然认为是高度较小),然后以较小的那个尺寸计算图片尺寸即可(比如按高度计算,则不设置宽度令其自动缩放)
至于居中这些,相信不会有难度
百分比图片变形的话,你只要给图片设置宽度百分比,不要设置高度就好了
外层容器
上
中(9宫格子)
下
布局
假定 上 中 下 三个区域 全部是相对 外层容器
上中下 三个 全部用百分比设置
9宫格全部是 33%宽高
1)你要控制的就是 外层容器的大小 css或者js 随便
2) 全部等比缩放是不可能的 比如 上 那幅图 在等比例 拉伸情况下 必然发生 有部分边缘不能显示
另外 要考虑 设备横过来时候 外层容器大小的定义
是继续 满屏 还是 高度满屏 宽度比例拉伸剧中 还是 设置 min-height
百分比图片变形的话,你只要给图片设置宽度百分比,不要设置高度就好了