大家好，今天Win10系统之家小编给大家分享「如何让网站适应手机」的知识，如果能碰巧解决你现在面临的问题，记得收藏本站或分享给你的好友们哟~，现在开始吧！

1.如何让一个pc页面自动适应手机屏幕？

　　页面自适应屏幕的方法（以下字母及标点为专业代码）：
　　无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。
　　首先，在网页代码的头部，加入一行viewport标签 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。即让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。
　　
　　其次：
　　网页宽度css一定要使用百分比width: xx%;，不能用绝对像素。
　　当然可以用width:auto; 
　　第三，流动布局 .left{float: left;width: ***%;} 
　　第四，选择加载css 这是自适应的关键部分 .abc{ height:300px; border:1px solid #000; margin:0 auto}  @media screen and (min-width: 1201px) {  .abc {width: 1200px}   }  /* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */  @media screen and (max-width: 1200px) {  .abc {width: 900px}   }  /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */  @media screen and (max-width: 901px) {  .abc {width: 200px;}   }  /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */  @media screen and (max-width: 500px) {  .abc {width: 100px;}   }  /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */  需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。
　　第四，图片自适应 img { max-width: 100%;} 老版本的IE不支持max-width，所以只好写成：img { width: 100%; }
　　第五、采用相对字体大小 字体也不能使用绝对大小（px），而只能使用相对大小（em）。 这里最重要的，是第三条和第四条，也就是采用流动布局和css选择加载。

2.如何让网站支持手机访问。

　　网站本来就可以被手机访问，手机只要有浏览器，就可以和电脑一样浏览网站，为了适应用户的观看习惯，所以就出现了手机专用网站。
而手机网站的概念就是原有的网站，自动适应手机的界面尺寸自动变化，所以这个基本上有三种方案：
1.如果已有网站，可以为网站单独制作一套手机访问的模板，而数据还是调用原有网站的内容，这要看原有网站程序的适应能力。
2.已有网站的情况下，为整个网站单独制作一套不同的系统，供手机网站访问，而代码中添加识别功能，电脑访问自动跳转原网站，如果是手机访问自动跳转到手机站点。
3.如果还没有网站的情况，特别是企业公司类，可以直接找专业团队制作新型网站系统，现在的技术可以实现，PC网站+手机站+企业微信管理+APP，四维一体统一管理的网站系统，能够适应各种客户端移动端和互动的需求。

以上就是关于「如何让网站适应手机」的全部内容，本文讲解到这里啦，希望对大家有所帮助。如果你还想了解更多这方面的信息，记得收藏关注本站~

【文②章♀来自Win10系统之家，转载请联系！】