导航:首页 > 网站知识 > 如何让网站适应手机

如何让网站适应手机

 发布时间：2022-03-08 08:58:20

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

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

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

② 怎么让网页自动适应各个手机浏览器

1 . 第一种：

第一个想法是需要使用一个 css 背景图，如果这张图够大，就能填充整个屏幕。当浏览器窗口大小没有图片大时，它将自动隐藏多余的部分。
<head> .... <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("img.source-image").hide(); var $source = $("img.source-image").attr("src"); $('#page-body').css({ 'backgroundImage': 'url(' + $source +')', 'backgroundRepeat': 'no-repeat', 'backgroundPosition': 'top center' }); }); </script> </head> <body id="page-body"> <img class="source-image" src="images/image.jpg" alt="" /> </body>

上面的这些代码能够自动隐藏超出浏览器窗口部分的图片(image.jpg)多余部分，不会使浏览器产生滚动条。

2 . 第二种：

第一次试验的效果并没有达到要求，并不是真的使得背景图片适应窗口大小，应该使用设置“宽度”和“高度”属性来控制图片的大小，如果我们能够得到浏览器窗口显示像素，就可以利用这个数字来控制图片大小，同时保持比例。

使用 jquery 和 dimensions plugin 可以获得这些参数。
<script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.dimensions.js"></script> <script type="text/javascript"> $(document).ready(function() { var $winwidth = $(window).width(); $("img.source-image").attr({ width: $winwidth }); $(window).bind("resize", function(){ var $winwidth = $(window).width(); $("img.source-image").attr({ width: $winwidth }); }); }); </script>

为了让这张图片更像一个背景图像，我们设置：
img.source-image {position: absolute;top: 0;left: 0;}

因为背景图片加上了定位代码，那要加在背景图片上任何东西都需要定位，如果您的背景图像是竖条状的（特别的高），而你的浏览窗口特别的宽，很容易造成背景图片高度超过您的浏览器窗口的高度，为了防止这种情况，需要设定对超出的部分进行隐藏：
body {overflow: hidden;}

3 . 第三次方法（最好的）：

Stu Nicholls version给出了最好的方法(看了下网易的首页也是这样做的)，这处理方式不需要任何的 JavaScript 就能完美的达到目的。
#img.source-image {width: 100%;position: absolute;top: 0;left: 0;}

在 css 里直接设定背景图片宽度的百分比，这是这个方法的效果。这个方法是最好的，而且不需要任何的 JavaScript 。

③ 网页设计中，如何让页面自适应手机端

一般来说，通过CSS3，可以直接对不同分辨率下的样式进行定义，比如如下的代码。
/* PC或中大型笔记本设备 desktop */ @media all and (min-width: 1201px) { .title-desktop{ display: block !important; } .container { width: 1100px; } } /* 中小型笔记本或大平板 laptop */ @media all and (min-width: 980px) and (max-width: 1200px) { .title-laptop{ display: block !important; } .container { width: 920px; } }
但是上面的方法，可能不会兼容老版本ie。
所以也可以通过js，识别当前页面的分辨率，来给出样式，这种比较好也比较复杂，代码量很多但是一般没有兼容问题。

④ CSS如何让网站适应手机屏幕

并不是加了meta标签，网站就会自适应手机屏幕了，还需要更改一些样式。

你图片上显示搜索框的宽度是568px，但是页面的宽度只有375（iPhone X的页面显示宽度），所以肯定会超出去，发生显示不全的情况

这种情况你可以使用media标签来做自适应

@mediaonlyscreenand(max-width:400px){
.search{width:300px}
}

上面代码的意思是当页面宽度小于400px的时候 就让.search的宽度变成300px。你可以吧上面的代码加到你的css里面看一下效果

⑤ html如何适应手机

有几种，利用meta标签、百分比法、使用CSS3单位rem、媒体查询。

⑥ HTML网页如何自动适应手机屏幕

⑦ 做好了网页，怎么让它自适应手机屏幕

⑧ 如何让网站自适应手机

1.
首先要说下，就算你的导航自适应手机，而整站的代码不适合手机，网站也无法像你想象的那种样式在手机展示的。
2.
要吗制作一个手机版的网站
3.
要吗更换模板，现在有那种全站页面自适应的html模板，您下载后自己修改为织梦网站模板也可以的了
梦客吧织梦模板

为您解答
望采纳

⑨ 如何让一个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的宽度等于物理设备上的真实分辨率，不允许用户缩放。

⑩ 怎么让自己的网页自己适应手机屏幕

打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入meta标签。
2
向浏览器声明该网页为移动设备自适应网页的meta标签为：
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
3
将以上标签加入之后保存，再用手机打开即是自适应网页了。

阅读全文

与如何让网站适应手机相关的资料

热点内容
网络共享中心没有网卡 浏览：317
电脑无法检测到网络代理 浏览：1209
笔记本电脑一天会用多少流量 浏览：324
苹果电脑整机转移新机 浏览：1223
突然无法连接工作网络 浏览：803
联通网络怎么设置才好 浏览：1008
小区网络电脑怎么连接路由器 浏览：764
p1108打印机网络共享 浏览：1028
怎么调节台式电脑护眼 浏览：465
深圳天虹苹果电脑 浏览：702
网络总是异常断开 浏览：423
中级配置台式电脑 浏览：749
中国网络安全的战士 浏览：432
同志网站在哪里 浏览：1194
版观看完整完结免费手机在线 浏览：1276
怎样切换默认数据网络设置 浏览：923
肯德基无线网无法访问网络 浏览：1073
光纤猫怎么连接不上网络 浏览：1213
神武3手游网络连接 浏览：783
局网打印机网络共享 浏览：818