现在手机流量占总流量的60%以上，不做移动端适配等于放弃一半用户。两种主流方案：响应式设计和独立移动站。
响应式设计，一套代码适应所有屏幕。核心是CSS媒体查询，根据屏幕宽度加载不同的样式。优点是维护成本低，缺点是移动端仍然加载完整的PC页代码。
<!-- viewport必须设置，否则手机会缩放网页 -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<!-- CSS媒体查询示例 -->
<style>
/* 基础样式（手机优先） */
.container {
width: 100%;
padding: 15px;
}
/* 平板：768px以上 */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
padding: 20px;
}
}
/* 桌面：1200px以上 */
@media (min-width: 1200px) {
.container {
width: 1200px;
padding: 30px;
}
}
</style>
独立移动站（M站），为手机单独做一套页面。域名用m.yoursite.com或者子目录/amp/。优点是移动端加载快、体验好，缺点是要维护两套代码。
# Nginx识别移动端跳转（如果用独立M站）
server {
listen 80;
server_name www.yoursite.com;
root /www/wwwroot/yoursite;
# 根据User-Agent跳转到移动版
if ($http_user_agent ~*
"(Android|iPhone|iPad|Windows Phone|Mobile)") {
return 301 https://m.yoursite.com$request_uri;
}
}
怎么选？内容站、博客、资讯站用响应式就行，维护简单。电商、工具类网站建议做独立M站，移动端体验更好。
不管哪种方案，记得用Google的Mobile-Friendly Test工具测一下，确保搜索引擎认为你的页面是移动友好的。这影响搜索排名。
申请创业报道，分享创业好点子。点击此处，共同探讨创业新机遇！
