檬味博客 » 问答 » 怎么修改网站的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 阅读 38 次 更新于 2025-09-09 05:14:59 我来答关注问题0
4 个回答檬味博客专题活动
  • 翡希信息咨询 如何用css设置鼠标属性的小手

    用CSS设置鼠标属性为小手，可以通过cursor: pointer;实现。以下是具体说明：CSS cursor属性：CSS中的cursor属性用于设置鼠标指针在元素上悬停时的样式。通过修改这个属性，可以改变鼠标指针的形状，提供用户不同的交互提示。设置小手图标：要将鼠标指针样式设置为小手，可以直接使用cursor: pointer;这一CSS样式。

  • 百度网友a9f118e 如何设置网站鼠标经过时变成手的形状?

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

  • 校企律说法 如何用css设置鼠标属性的小手

    在网页设计中，我们经常需要改变鼠标样式以提示用户某些元素可以被交互。CSS中的cursor属性提供了多种样式选项，其中之一便是pointer。使用cursor:pointer;可以将鼠标指针变为小手形状，指示用户该区域可以进行点击操作。例如，当用户将鼠标悬停在一个按钮上时，将鼠标指针设置为小手可以提示用户该区域可以点击，...

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

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

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

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

其他CSS类似问题

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

CSS相关话题

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