檬味博客 » 问答 » 怎么修改网站的css让它适应手机端？

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

1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的标签中，输入meta代码：。3、浏览器运行index.html页面，此时PC端的网页在移动端上也能自动适配。
怎么修改网站的css让它适应手机端？
两种思路：
一、响应式网站（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
2017-08-21
需要准备的材料分别有：电脑、浏览器、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端的网页在移动端上也能自动适配。

2019-07-12
主要就是百分比宽度，用不用楼上说的东西都无所谓，不会的话现学bootstrap估计能做出来得半年以后了。2017-08-21
修改css，改成响应式的设计就行了2017-08-21
mengvlog 阅读 8 次 更新于 2025-07-20 03:22:12 我来答关注问题0
4 个回答檬味博客专题活动
  • 百度网友a9f118e 如何设置网站鼠标经过时变成手的形状?

    链接元素默认状态下就是小手的形状，想让其他元素在鼠标滑过的时候成小手形状需要一些设置。实现代码如下:[HTML] 纯文本查看 复制代码运行代码0102030405060708091011121314151617181920蚂蚁部落div{ width:100px; height:100px; margin:0px auto; cursor:pointer; background:green;} 上...

  • 快乐生活 如何让尺寸完美适应进而撑满指定空间?

    一、平面图形：若在矩形空间放置图形，对于规则图形如正方形，计算空间边长，使正方形边长与之相等即可撑满一边；对于圆形，根据空间直径确定圆半径，让圆直径与空间较短边相等以实现适配。二、网页元素：利用CSS布局，如使用Flexbox或Grid布局。Flexbox可通过设置`flex-grow: 1`让元素按比例分配剩余空间；...

  • 校易搜全知道 如何用css设置鼠标属性的小手

    用CSS设置鼠标属性为小手，可以通过cursor属性实现。详细解释：1. CSS cursor属性介绍：CSS中的cursor属性用于设置鼠标指针在元素上悬停时的样式。通过修改这个属性，可以改变鼠标指针的形状，以提供用户不同的交互提示。2. 小手图标设置：要将鼠标指针样式设置为小手，可以使用`cursor: pointer;`这一CSS样式。

  • 云易网络科技 一个电脑网站怎么转成手机版的网站

    首先，可以采用响应式设计，利用CSS媒体查询等技术手段，使网站能够根据不同设备的屏幕尺寸和分辨率进行自适应布局和样式调整。这种方法能够确保网站在手机等移动设备上展示出良好的用户体验。其次，可以选择制作专门的移动网站，使用不同的域名或子域名，为移动设备用户提供服务。这需要重新设计网站的布局、导航...

  • 猪八戒网 刚接手一个网站,网页排版错乱,怎么修改?

    做浏览器的hack即可。2、是否为css或js文件未加载？F12看一下加载的资源文件是否正常，是否有全局的css文件没有引入，导致的布局错乱。针对这种情况，正确引入css可解决。3、最后也是最头疼的问题，是否为代码问题？那没有好的方法，只能一点一点看前辈的代码，一点点填坑。最后祝您坚持不懈，早日填坑。

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部