咨每天咨询前三位,可以免费给您分析网站!!!咨询热线:13253304250当前位置: 郑州网站建设 > 建站知识 > 手机网站知识分享 >
联系我们
QQ:254546623
电话咨询:13253304250
E-mail:254546623@qq.com
地址:金水区花园路农业路豫博大厦1205室

手机网站切图的方法和规范

作者/整理:郑州君捷网站建设 来源:郑州网站建设 2017-03-19

   手机切图往往最难的就是文字排列大小和小屏幕手机内容溢出处理等;之前写了一个手机页面,可能也是有一段时间没有写,让我有了一点想法;在这里我也是总结一下,初步制定一个初略规范,方便以后编写规范。还有一些是郑州君捷网站建设,总结的一些经验。

手机网站切图的方法和规范


   手机网页规范设定

主体:
 
(最大宽度640px为标准)  max-width:640px;
(设定原始字体为18px)    html{font-size:16px;}
(主内容宽度为body的93.75%,在最大宽度是距离左右边距为约20px) width:93.75%;margin;0 auto;
(大标题文字大小为1.8rem,小标题文字大小为1.4rem,内容文字大小为1.2rem)
按实际情况调节html文字大小,最小不能少于12px;
大标题文字最小不能小于1.6rem;
小标题文字最小不能小于为1.2rem;
内容文字大小为1.1rem;
 
按钮:
 
宽度最大为90%;
高度最小为250%(3.5rem 暂测);
按钮字体最小为1.4rem;


手机网页切图小技巧
 
小技巧:
 
当排列列表时,在行内溢出外边距导致块挤到下一行,正常情况下使用百分比的宽度是无法在不用css清除边距情况下使块复位;以下方法可以不使用单个清除css样式使块复位:
在外框块写进一个块,使它比外外框块多出边距宽度,
(列表块宽度+边距)*列表数 =100,
 
当列表块在一行内给1px的边框时,因为所有的宽度都是百分比,所以实际像素无法确定小分辨率手机页面整体,而且也无法准确与百分比宽度结合:
在确定百分比宽度的块,在里面写一个块(div),不给与宽度(一般块是默认宽度为100%),然后写边框属性,即可。
 
抛弃em规范,选用rem规范:
 
em:主要作用于父级元素,在父级元素没有定义该属性,会向上查找,如果查找不了,直接使用默认数值的百分比,1em=100%;
rem:所有设定该单位的属性直接作用于跟标签下(html)。
em和rem都是文字大小单位,即:font-size:1em 或者 font-size:1rem;
在调整不同分辨率手机页面时,需要适当调整页面大小,em需要调整每一个需要调整元素的属性,ren只需要调整html标签下的font-size属性即可达到整体变小。

   郑州君捷网站建设总结:以上是郑州网站建设给您分享的,希望您少在这上面犯错误。更多资讯关注:郑州网站建设。

[相关阅读]