在移动互联网的时代，手机屏幕自适应效果越来越受到重视。本文将介绍。
1. 使用viewport标签
在HTML的head标签中加入以下代码：
“`etaametentitial-scale=1.0″>
这样可以让页面的宽度适应设备的宽度，同时初始缩放比例为1.0。
2. 使用百分比布局
在设计页面时，使用百分比布局可以让页面元素的宽度和高度随着屏幕的大小而变化。例如：
这样就可以让这个div在不同屏幕大小下保持相同的比例。
3. 使用媒体查询
媒体查询可以让页面在不同屏幕大小下采用不同的CSS样式。例如：
“`ediadax-width: 480px){
body{ t-size:14px;
}
这样在屏幕宽度小于等于480px时，body元素的字体大小就会变为14px。
综上所述，使用viewport标签、百分比布局和媒体查询可以实现手机屏幕自适应效果。在设计移动端页面时，需要考虑不同屏幕大小的适应性，使页面在不同屏幕下都能够呈现出最佳的效果。