针对不同的屏幕分辨率应该用不同的CSS样式。
比如在电脑、iPad上,屏幕比较宽,就可以一行放多个div。到了手机上,或者Pad竖着拿的的时候,一行就只放1到2个div就差不多了。这样在移动设备上,无论是字体大小还是页面布局就不会显得很局促。一切都是为了客户的体验度。
知识点一:
meta标签设置
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1.0),即网页初始大小占屏幕面积的100%。
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,maximum-scale=1.0,user-scalable=no">
maximum-scale=1.0,minimum-scale=1.0;可视区域的缩放级别,maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上,minimum-scale=1.0当然就是禁止缩小了。user-scalable:是否可对页面进行缩放,no 禁止缩放.
知识点二:
知识点二不使用绝对宽度和字体。
知识点三:
图片缩放和流式布局。
知识点四:
media query媒体查询。