为了账号安全,请及时绑定邮箱和手机立即绑定

移动端怎么让文字随着屏幕的大小自适应,代码应该怎么写呢?我现在写的代购,屏幕小的时候就会被挤出来了

移动端怎么让文字随着屏幕的大小自适应,代码应该怎么写呢?我现在写的代购,屏幕小的时候就会被挤出来了

糖小心 2016-05-21 10:53:45
<!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

TA贡献345条经验 获得超309个赞

设媒体查询,@media screen and (”屏幕宽度“){属性},这样就可以了

查看完整回答
1 反对 回复 2016-05-21
  • 糖小心
    糖小心
    在哪里加呢?是这样吗? <style> @media screen and (”屏幕宽度“){属性} *{ 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;} </style>
  • 刚毅87
    刚毅87
    属性里面写随屏幕大小变化的属性,例如:@media screen and (max-width:600px){div{width:100px;}}/*当屏幕宽度不大于600px时,div的宽度为100px*/;@media screen and (min-width:600px) and (max-width:800px){div{width:200px}} /*当屏幕宽度大于600px,且小于800px时,div宽度为200px*/。 类似于这种,括号里面的宽度写你屏幕的宽度就行
  • 糖小心
    糖小心
    好的,这个是写在CSS样式里边的吗?谢谢大师
点击展开后面1
?
涂大仙

TA贡献18条经验 获得超15个赞

使用rem,给根元素定义一个字号,其他的字号全部用rem定义。

查看完整回答
反对 回复 2016-05-23
  • 2 回答
  • 1 关注
  • 8610 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信