手机前端设计的基本页面大小问题？
0
悬赏园豆：50
[已解决问题]
解决于 2014-05-21 23:07
http://demos.jquerymobile.com/1.4.2/button-markup/
就那jquery mobile 来说吧
我发现这个站在手机上的显示效果 比在电脑上的显示效果小一号（包括图片）
实际我自己用px作为单位设计过一个页面 结果简直坑爹啊 和电脑上的比例是1:1 的在手机上就没法看 所以我现在想请教下 手机上的缩放比例 和 电脑上的关系 最好有相关文章
最佳答案
0
电脑上和手机上的版本不能一致，电脑就专做电脑设计，你说的这个问题是手机端的适应问题
用meta标签的viewport
http://www.cnblogs.com/asqq/archive/2012/04/23/2466691.html
收获园豆：30
感谢几位的回复！
其他回答(2)
0
给你点意见，移动web页面设计可以采用rem作为相对单位，这个国外的网站用的相对多一点。你可以百度一下html中rem的作用。简单的说，就是html标签的font-size值。然后根据屏幕大小设定基准值。例如基准值为屏幕宽：$('html').css({'font-size':screen.width});或者基准值为页面可见区域宽:$('html').css({'font-size':document.body.clientWidth})。需要注意的是所有有大小的元素属性都必须用rem单位赋值，例如字体大小，图片大小，边框大小等。这样的话当你屏幕宽改变页面中的所有元素大小自动按比例变化。
收获园豆：10
这个原理我大致知道 但是有demo么？？？
@小眼睛老鼠: 最简单的例子，仅供参考……
<!--<!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>
最让人不能理解的是背景图片 拿东西好像不能缩放的吧 就算你的边框 按你的说法缩放了 图片肯定不支持缩放放啊
@小眼睛老鼠: 基本上每个有大小属性的标签都是可以改变的。背景图片建议用div包裹。然后设定div的position:"absolute";即绝对定位，再设置图片大小。要显示的元素可用另一个position:"absolute"的div包裹显示，并且背景图片所在div的z-index应该更小，可设为z-index:0。
@小小三师弟: 我说的图片是背景图 用background-image
@小眼睛老鼠: 这个background-image据我所知应该是改变不了的，所以才用层次结构来达到背景图效果
@小小三师弟: 而且 还有一点就是 即使我吧浏览器缩小到最小 和手机屏幕一样大 但是在手机上看的字 还是比浏览器上的字小 这个难道是因为像素问题 这个好像已经无法用 浏览器带下来解释了吧
@小小三师弟: 我问这个问题 主要是想美工设计的图 和我的实际显示的样子保持一致 不然会很难办
@小眼睛老鼠: 只要保持比例不变，效果基本上应该没区别。你可以只改变宽，那它的高就按比例自动改变。总的来说，只要不怕麻烦，你想到的效果都可以达到。
0
请查看css: backgroud-size: 图片缩放 平铺 关于手机的自适应 请看 自适应网页设计 (@medio)
收获园豆：10
