今天收到一个同事的投诉：创建直播间为啥要固定尺寸啊？不能用手机自带的比例（16:9）吗？然后发了张比例图给我，并标明他用的是华为mate7，直接选择图片比例是多么的方便。
我在拥挤的地铁上耐心的回复：手机上的图片都是自适应的，不能固定比例（分辨率），不同的手机分辨率不同……
解释了一大推，也不知道他听懂没，但想起刚入行的我，不也对这些一直模模糊糊的吗？今天整理一下手机中图片和文字显示技术方面的实现思维。
一、图片大小
首先要了解一个基本概念，不同手机的分辨率不同，即使我们定义了一个规定的尺寸，程序在实现时不是按照这个固定尺寸来的，而是根据手机屏幕的大小来自适应的。
允许网页宽度自动调整 不使用绝对宽度，具体来说，就是手机宽度有多大，图片就平铺到多大。下面用几个实例来说明：
1、宽度自适应，高度不限：常用于富文本编辑器中的图片，或者进入的网页是一整张图片的网页
当图片高度>屏幕高度时，可以在页面下拉；
当图片高度<屏幕高度时，缺少的部分显示为背景色。
2、宽度自适应，高度固定：一般用于banner图
当图片高度>固定高度时，裁剪图片上下多余的部分；
当图片高度<固定高度时，图片上下缺少的部分显示为背景色。
3、宽度百分比，高度固定：一般用于页面列表中的小图
当图片宽度>屏幕百分比时，图片宽度自动缩小到与屏幕中的宽度相同，图片高度与宽弟等比缩放；
当图片宽度<屏幕百分比时，图片宽度自动放大到与屏幕中的宽度相同，图片高度与宽弟等比放大；
以上两种情况，图片的高度适配与第2条相同。
二、字体大小
相应的字体也不能使用绝度大小（px），而只能使用相对大小（em）。
body{
font：normal 100% Helvetica，Arial,sans-serif;
}
这段代码是指，字体大小是页面默认大小的100%，即16像素
h1{
font-size:1.5em;
}
然后,h1的大小是默认大小的1.5倍，即24像素（26/16=1.5).
samll{
font-size:0.875em；
}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）
网友评论