Heim  >  Artikel  >  Web-Frontend  >  手机 web 适应 各种屏幕,不出现上下和左右的滚动条 大神们来帮忙了_html/css_WEB-ITnose

手机 web 适应 各种屏幕,不出现上下和左右的滚动条 大神们来帮忙了_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:51:151594Durchsuche

rt 
现在有一个手机web , psd 设计稿是 640x1130  (w/h) 的, 现在要求是能在各种大小屏幕的手机里,不出现滚动条, 设计稿里的图片和按钮不被拉长和压扁,就是要等比缩放;

我第一次的做法就是 width:100%, height:100% 然后计算设计稿的图片占的百分比写的css 样式,在不同的手机里,页面里元素均出现不同的拉长或压扁 ,被打回重做

我现在的思路是 在 body 里先做一个 长宽比为 1136/640 的容器,然后把页面中的元素在这个容器里,在按百分比布局,现在问题是 这个1136/640 的容器,什么时候给他设置长宽比? 我的实现步骤就是用 zepto.js 

$(document).ready(function(){        // code   //...在屏幕中间,取出一个面积最大的 1136/640的容器,然后使其居中,左右留白})


但这样一来,页面dom都加载完了,才做这个动作,有点晚了, 我下面的想法就是之前在 1136/640 容器里的标签,全部写在  js 里, 等容器设置好 1136/640 这个长宽比后,再将标签 append 到 这个容器里

不知道这个方法可行不,这样一来,后台程序该怎么写,我觉得这是个很糟糕的设计,求大神们给出宝贵的意见、建议、想法或者解决方案,不胜感激


回复讨论(解决方案)

请搜 响应式设计

简单的 
复杂的用css媒体查询试试

@ 二楼, 三楼
这些都有的,我有接触, 但是目前市面这么多手机,媒体查询 如何是好啊
可能是我没把问题描述清楚:

psd 设计稿只有 640 x 1136 (wxh), 要求是

1.设计稿中的内容全屏显示,允许左右留白,下方留白
2.不能出现滚动条
3.在各种不同尺寸的手机上,设计稿的元素不能被压缩 拉伸,实现等比缩放

如下图, 如果响应式设计、 媒体查询能够实现的话,该怎么设置分界点,麻烦讲一下详细的步骤,谢谢

用js计算吧,设备高度减去头尾高度就是内容区域的高度了,设备宽度即内容区域宽度,然后按设计图的图片比例,计算到底是宽度较小还是高度较小(比如图片宽高比例2:3,即使内容区域尺寸为220:300,仍然认为是高度较小),然后以较小的那个尺寸计算图片尺寸即可(比如按高度计算,则不设置宽度令其自动缩放)
至于居中这些,相信不会有难度

用js计算吧,设备高度减去头尾高度就是内容区域的高度了,设备宽度即内容区域宽度,然后按设计图的图片比例,计算到底是宽度较小还是高度较小(比如图片宽高比例2:3,即使内容区域尺寸为220:300,仍然认为是高度较小),然后以较小的那个尺寸计算图片尺寸即可(比如按高度计算,则不设置宽度令其自动缩放)
至于居中这些,相信不会有难度



嗯 , 谢谢,基本我们找到共同点了,我也是这么考虑的,但是代码实现,我应该是在dom 加载完后 读取 显示区域的宽 高比吧,若用两套css , 就是浏览器宽高比 大于图片宽高比的时候,一套css, 小于的时候,另一个套css, 如何引用所需要的样式文件呢 ?

百分比图片变形的话,你只要给图片设置宽度百分比,不要设置高度就好了

外层容器
  上
  中(9宫格子)
  下
布局


假定 上  中 下  三个区域 全部是相对  外层容器
上中下 三个  全部用百分比设置
9宫格全部是 33%宽高

1)你要控制的就是  外层容器的大小  css或者js 随便
2) 全部等比缩放是不可能的 比如  上  那幅图 在等比例 拉伸情况下  必然发生 有部分边缘不能显示

另外 要考虑 设备横过来时候 外层容器大小的定义

是继续 满屏 还是 高度满屏 宽度比例拉伸剧中 还是  设置 min-height

百分比图片变形的话,你只要给图片设置宽度百分比,不要设置高度就好了



嗯嗯,主要问题是对整个页面的设置
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn