移动端怎么让文字随着屏幕的大小自适应，代码应该怎么写呢？我现在写的代购，屏幕小的时候就会被挤出来了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<!--<meta name="viewport" content="width=640,user-scalable=no,target-densitydpi=device-dpi" />-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=1.0, user-scalable=yes" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
$(".y").click(function(){
if($(this).hasClass("x")) {
$(this).attr('src','images/02.png');
$(this).removeClass("x");
} else {
$(this).attr('src','images/01.png')
$(this).addClass("x");
/*
$('.y').not(this).removeClass("x");
$('.y').not(this).attr('src','images/02.png');
*/
}
});
});
$(function(){
$(".b2_n").mousedown(function(){
$(this).css({"backgroundColor":"#f5f5f5"})
})
$(".b2_n").mouseup(function(){
$(this).css({"backgroundColor":"#fff"})
})
})
$(function(){
$(".c").click(function(){
$(".dis"). slideToggle(500);
});
})
</script>
<!--
<script>
function myFun(sId) {
var oImg = document.getElementsByTagName('img');
for (var i = 0; i < oImg.length; i++) {
if (oImg[i].id == sId) {
oImg[i].previousSibling.previousSibling.checked = true;
oImg[i].style.border = '1px solid #FF6600';
} else {
oImg[i].style.border = '1px solid #008800';
}
}
}
</script>
-->
<style>
*{ padding:0; margin:0;}
li,ul{ list-style:none;}
body{ font-family:'微软雅黑';font-size:12px;color:#333; margin:0 auto; padding:0; background:#f7f7f9;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
a:hover{ text-decoration:none;}
a:link,a:visited{ text-decoration:none;}
.sub_xq{height:2.2rem;background:#01aaef;color:#fff;font-size:1rem;border:none;width:20%; border-radius:0px;}
.house{background:#fff; padding:3% 5%; border-bottom:1px solid #ddd;border-top:1px solid #ddd; width:90%; height:1.5rem; margin-top:0.5rem;}
.house span{color:#333;font-size:0.85rem; width:90%;display:inline;}
.whouse{background:#fff; padding:3% 5%; border-bottom:1px solid #ddd;border-top:1px solid #f5f5f5; width:90%; height:4rem; margin-top:-1px;}
.whouse ul li i{ background:url(images/xm.png) no-repeat left;}
.whouse ul li{ line-height:2rem; font-size:0.8rem; float:left;}
.whouse ul li img{ float:left; width:20px;vertical-align: middle; margin-top:0.3rem;}
.whouse ul li span{ display:block; float:left; margin-left:5px; color:#999;vertical-align: middle; line-height:2rem;}
.fangwuxx{ padding-top:0.6rem;background:#fff; border-bottom:1px solid #ddd; border-top:1px solid #ddd; width:90%; height:auto; overflow:hidden; padding-left:5%; padding-right:5%; padding-bottom:0.6rem;}
.louhao{font-size:0.8rem; color:#333; line-height:2rem; float:left; display:block;}
.axq{ background:#09F; font-size:0.8rem; padding:0.2rem 0.4rem; float:right; border:none; color:#fff; margin-top:0.2rem;}
.ayz{ background:url(images/xm.png) no-repeat left;}
.awz{ font-size:0.6rem; color:#666;}
.fangwuxx ul li{ line-height:2rem;}
.fangwuxx ul li img{float:left; width:20px;vertical-align: middle; margin-top:0.3rem;}
</style>
</head>
<body>
<div style="font-size:1rem; width:90%; padding:3% 5%; background:#16a7e6; color:#fff;">请选择需要缴费的房屋</div>
<div>
<div class="fangwuxx">
<div>
<span class="louhao">项目名称-26号楼-2单元-602</span>
<button type="button" class="axq">查看详情</button>
</div>
</div>
<div class="fangwuxx" style="margin-top:-1px;">
<ul>
<li style="width:30%; float:left;"><img src="images/xm.png"/><span style=" margin-left:5px;">业主姓名：*哈哈</span></li>
<li style="width:70%; float:left;">
<div style="float:right;">
<img src="images/dh.png"/><span style=" margin-left:5px;">手机号：13698666463 13698666463</span>
</div>
</li>
</ul>
</div>
</body>
</html>
糖小心2回答
-
刚毅87
设媒体查询，@media screen and （”屏幕宽度“）{属性}，这样就可以了 -
涂大仙
使用rem，给根元素定义一个字号，其他的字号全部用rem定义。
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5