首页新闻找找看学习计划

手机前端设计的基本页面大小问题?

0
悬赏园豆:50 [已解决问题] 解决于 2014-05-21 23:07

http://demos.jquerymobile.com/1.4.2/button-markup/

 

就那jquery mobile 来说吧 

我发现这个站在手机上的显示效果 比在电脑上的显示效果小一号(包括图片)

实际我自己用px作为单位设计过一个页面 结果简直坑爹啊 和电脑上的比例是1:1 的在手机上就没法看 所以我现在想请教下 手机上的缩放比例 和 电脑上的关系 最好有相关文章

小眼睛老鼠的主页 小眼睛老鼠 | 老鸟四级 | 园豆:2774
提问于:2014-05-04 14:27
< >
分享
最佳答案
0

电脑上和手机上的版本不能一致,电脑就专做电脑设计,你说的这个问题是手机端的适应问题

用meta标签的viewport  

http://www.cnblogs.com/asqq/archive/2012/04/23/2466691.html

收获园豆:30
Cloudoit | 初学一级 |园豆:109 | 2014-05-09 10:59

感谢几位的回复!

小眼睛老鼠 | 园豆:2774 (老鸟四级) | 2014-05-21 23:08
其他回答(2)
0

给你点意见,移动web页面设计可以采用rem作为相对单位,这个国外的网站用的相对多一点。你可以百度一下html中rem的作用。简单的说,就是html标签的font-size值。然后根据屏幕大小设定基准值。例如基准值为屏幕宽:$('html').css({'font-size':screen.width});或者基准值为页面可见区域宽:$('html').css({'font-size':document.body.clientWidth})。需要注意的是所有有大小的元素属性都必须用rem单位赋值,例如字体大小,图片大小,边框大小等。这样的话当你屏幕宽改变页面中的所有元素大小自动按比例变化。

收获园豆:10
小小三师弟 | 园豆:205 (菜鸟二级) | 2014-05-04 14:51

这个原理我大致知道 但是有demo么???

支持(0) 反对(0) 小眼睛老鼠 | 园豆:2774 (老鸟四级) | 2014-05-04 16:04

@小眼睛老鼠: 最简单的例子,仅供参考……

<!--<!DOCTYPE html>-->

<html lang="en" class="no-js">

<head>

<meta charset="utf-8">
<title>test</title>

<style>
html{
font-size:1000px;
overflow: hidden;
}
body{
font-size:0.012rem;
overflow: hidden;
}
.fa1{
width:0.4rem;
height:0.3rem;
background:#ccc;
}
.son1{
width:0.3rem;
height:0.15rem;
background:#999;
font-size:0.02rem;
}
.son2{
width:0.3rem;
height:0.15rem;
background:#666;
}

.fa2{
width:200px;
height:150px;
background:#ccc;
}
.son3{
width:150px;
height:75px;
background:#999;
font-size:0.02rem;
}
.son4{
width:150px;
height:75px;
background:#666;
}

</style>

<!--<script src="assets/js/jquery-1.8.2.min.js"></script>-->
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">

var oh;
var oldw = 1080;
var oldh = 1920;
var neww;
var newh;
var i = 0;

jQuery(document).ready(function() {

oo();
$(window).resize(function () {oo();});
//setInterval(oo,100);
//alert("您的浏览器内核为:"+getOs()+"-"+navigator.userAgent);

});

function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("Triden")>0) {
return "Triden";
}
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
if(navigator.userAgent.indexOf("Opera")>0){
return "Opera";
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari";
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino";
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko";
}
return OsObject;

}

function oo(){
neww = document.body.clientWidth;
newh = document.body.clientHeight;
//newh = screen.availHeight;
$('html').css({'font-size':neww});
$('body').height({'width':neww,'height':newh});
$('.son1').html(neww);
$('.son3').html(newh);
i++;
$("body").find('*').each(function(){
oh = $(this).height();
if(i==1){
$(this).height(oh*newh/neww);
}else{

$(this).height(oh*newh/oldh);
i=2;
}
});

oldw=neww;
oldh=newh;
}

</script>

</head>

<body>

<div class="fa1">
<div class="son1">

</div>
<div class="son2">

</div>
</div>
<div class="fa2">

<div class="son3">

</div>
<div class="son4">

</div>
</div>

</body>

</html>

支持(0) 反对(0) 小小三师弟 | 园豆:205 (菜鸟二级) | 2014-05-04 16:54

最让人不能理解的是背景图片 拿东西好像不能缩放的吧 就算你的边框 按你的说法缩放了 图片肯定不支持缩放放啊

支持(0) 反对(1) 小眼睛老鼠 | 园豆:2774 (老鸟四级) | 2014-05-04 16:55

@小眼睛老鼠: 基本上每个有大小属性的标签都是可以改变的。背景图片建议用div包裹。然后设定div的position:"absolute";即绝对定位,再设置图片大小。要显示的元素可用另一个position:"absolute"的div包裹显示,并且背景图片所在div的z-index应该更小,可设为z-index:0。

支持(0) 反对(0) 小小三师弟 | 园豆:205 (菜鸟二级) | 2014-05-04 16:59

@小小三师弟: 我说的图片是背景图 用background-image

支持(0) 反对(0) 小眼睛老鼠 | 园豆:2774 (老鸟四级) | 2014-05-04 17:00

@小眼睛老鼠: 这个background-image据我所知应该是改变不了的,所以才用层次结构来达到背景图效果

支持(0) 反对(0) 小小三师弟 | 园豆:205 (菜鸟二级) | 2014-05-04 17:03

@小小三师弟: 而且 还有一点就是 即使我吧浏览器缩小到最小 和手机屏幕一样大 但是在手机上看的字 还是比浏览器上的字小 这个难道是因为像素问题 这个好像已经无法用 浏览器带下来解释了吧

支持(0) 反对(0) 小眼睛老鼠 | 园豆:2774 (老鸟四级) | 2014-05-04 17:20

@小小三师弟: 我问这个问题 主要是想美工设计的图 和我的实际显示的样子保持一致 不然会很难办

支持(0) 反对(0) 小眼睛老鼠 | 园豆:2774 (老鸟四级) | 2014-05-04 17:26

@小眼睛老鼠: 只要保持比例不变,效果基本上应该没区别。你可以只改变宽,那它的高就按比例自动改变。总的来说,只要不怕麻烦,你想到的效果都可以达到。

支持(0) 反对(0) 小小三师弟 | 园豆:205 (菜鸟二级) | 2014-05-04 17:59
0

请查看css: backgroud-size:  图片缩放  平铺  关于手机的自适应 请看 自适应网页设计  (@medio)

收获园豆:10
SpeakHero | 园豆:45 (初学一级) | 2014-05-05 21:05
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册