怎么修改网站的css让它适应手机端？

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的标签中，输入meta代码：。

3、浏览器运行index.html页面，此时PC端的网页在移动端上也能自动适配。

两种思路：

一、响应式网站（PC、PAD、手机等自适应）

1. 在HTML源文件中的头部head加入：

   具体meta标签的含义自己可以查一下，学习一下，根据自己的情况设定。

   
   

2. 给对应的屏幕尺寸写单独的代码css样式表里写：@media screen and (min-width:640px){这里面写手机端标签的代码，例如，body{font-size:18px}， banner{width:640px}}，根据自己的需求调整下字体大小，尺寸等。

   注：@media标签要放在PC样式的下方，不然模式识别前面的标签会导致PC也显示这个样式。

响应式网站用框架比较方便，对于各个屏幕的大小需要做之前好好规划，应用百分比让网站自适应，缺点但不利于SEO，显示内容与PC、PAD基本都是一致的内容。

二、用JS识别做网站跳转

这种方法比较灵活，可以做一套自己想要的手机网站，比如做成APP的形式

1.加入js代码控制网站跳转：

var browser_class = navigator.userAgent;    
console.log(browser_class);    
var browser_class_name1 = browser_class.match("Mobile");    
var browser_class_name2 = browser_class.match("mobile");    
var location_url = window.location.href;    
console.log(location_url);    
if (browser_class_name1 != null || browser_class_name2 != null){    
        if (location_url.match("wap") == null){    
       window.location.href="http://m.baidu.com/";    
        }    
} else    
{    
       if (location_url.match("3g") != null || location_url.match("wap") != null){    
       window.location.href="http://m.baidu.com/";    
       }    
}

2.单独做一个手机网站，域名指向m.baidu.com

这种方式比较灵活，PC网站已经做好了，改响应式比较费劲，这种方法也挺好，也利于SEO

主要就是百分比宽度，用不用楼上说的东西都无所谓，不会的话现学bootstrap估计能做出来得半年以后了。

修改css，改成响应式的设计就行了