怎么修改网站的css让它适应手机端？
修改css还是js？有什么具体思路吗
最新回答
若樱落如烟
2023-03-29 21:04:01
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<head>标签中，输入meta代码：<meta name="viewport" content="width=device-width, initial-scale=1">。
3、浏览器运行index.html页面，此时PC端的网页在移动端上也能自动适配。
有你委屈也是欢乐的
2020-06-20 19:47:12
两种思路：
一、响应式网站（PC、PAD、手机等自适应）
在HTML源文件中的头部head加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
具体meta标签的含义自己可以查一下，学习一下，根据自己的情况设定。给对应的屏幕尺寸写单独的代码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
幽萌之羽
2024-02-18 16:16:26
浅色夏沫
2022-10-11 02:08:20
热门标签
