不同屏幕宽度_网页HTML如何实现页面自适应，适配手机屏幕

最新推荐文章于 2024-08-14 19:32:44 发布

weixin_39633276

最新推荐文章于 2024-08-14 19:32:44 发布

阅读量9.3k

点赞数 6

文章标签：不同屏幕宽度

本文链接：https://blog.csdn.net/weixin_39633276/article/details/112516379

版权

近些年自适应网站、响应式网站被推崇，几乎很多客户都会想要做移动端网站。其实PC网站基本也是可以改成自适应，页面的话需要进行重构，最重要的CSS样式及适配需要做好，细节再做优化。
说白了，把PC网站改成自适应的网站，那几乎等于重新做个移动版网站，毕竟人力和工期摆在哪边呢。
关于如何把现有HTML网页改成自适应的，徐伟轩博客就为大家整理如下内容供大家简单参考学习。

网页头部标签

首先在网页代码的头部，加入一行viewport标签
在网页的头部中增加以下这句话，可以让网页的宽度自动适应手机屏幕的宽度

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

width=device-width width为设置layout viewport 的宽度，为一个正整数，”width-device”表示宽度是设备屏幕的宽度
initial-scale=1.0 initial-scale为设置页面的初始缩放值，可以是一个带小数的数字，1.0就是占网页的100%
minimum-scale=1.0 表示最小的缩放比例
maximum-scale=1.0 表示最大的缩放比例
user-scalable=no 表示用户是否可以调整缩放比例，值为”no”或”yes”

宽度不用绝对的

width:auto; / width:XX%;(父元素一定要有宽度)

流动布局

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的

.left{ width:30%; float:left}
.right{ width:70%; float:right;}

像这样，用左浮动和右浮动，好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现

选择加载CSS

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。自动探测屏幕宽度，然后加载相应的CSS文件

"stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />

这段代码的意思是：如果屏幕宽度小于600像素(max-device-width: 600px)，就加载css600.css文件。
如果屏幕宽度在600像素到980像素之间，则加载css600-980.css文件

"stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />

还有(不建议使用)：除了用html标签加载CSS文件，还可以在现有CSS文件中加载
@import url("css600.css") screen and (max-device-width: 600px);

CSS媒体查询

CSS的@media与@media screen，媒体查询/匹配

媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕
媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。配图：自适应网站是什么样？
首先先讲一下@media与@media screen区别
@media与@media screen两者在手机设备上没有区别，但@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，那么就用@media 。语法
以@media或@media screen and开头来表示这是一条媒体查询语句。@media后面的是一个或者多个表达式，如果表达式为真，则应用样式。
@media

@media (max-width: 600px) {
.mainner {
display: none;
}
}

上面的代码在屏幕宽度小于 600px 的时候，会作用大括号里的内容。
注：max-width是目标显示区域的宽度，例如，浏览器宽度。
媒体查询可以在 link标签上加media属性或css文件中使用。具体例子就不举了。
@media screen
以下例子为当屏幕宽度小于400px的时候，就取消浮动

@media screen and (max-device-width: 400px)
{  .left {
float:none;
}
}

注：max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。

知识扩展

@media only screen and
only(限定某种设备)
screen 是媒体类型里的一种
and 被称为关键字，其他关键字还包括 not
not 指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器

例如：如果浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

图片自适应

"自适应网页设计"还必须实现图片的自动缩放

img {width: 100%;}

windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令

img { width:100%; -ms-interpolation-mode: bicubic;}

或使用js–imgSizer.js

addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});

实例代码：

<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>title><style type="text/css">body{background: url(images/bg.png) no-repeat;background-size:100% 100%;background-attachment: fixed;
}.container{width: 100%;text-align: center;position: absolute;top: 96px;
}.container img{transform: scale(0.8);height: auto;width: auto\9;
}#img1{width: 100%;position: absolute;bottom: 10px;margin-bottom: 40%;transform: scale(0.9);/*background: yellowgreen;*/
}#img2{width: 100%;position: absolute;bottom: 20px;margin-bottom: 12%;transform: scale(0.9);
}style>head><body><div class="container"><img src="images/logo@2x.png" alt="" />div><input type="image" src="images/iOS@2x.png" id="img2"/><input type="image" src="images/Android@2x.png" id="img1"/>body>html>

当然了，写到这里，除了图片自适应，那肯定也会需要涉及到视频自适应。毕竟现如今短视频和直播行业这么火热，网站具备自适应的视频播放那肯定也是一大亮点。

【总结】

当创建一个响应式网站，或让现有的网站变成响应式的，首先要关注的元素的布局。我在建立响应式的网站，总是先创建一个非响应的布局，页面宽度固定大小。如果非响应版本完成得非常不错，我再添加媒体查询(Media Queries)和响应式代码。这种操作方式更容易实现响应式特性，在同一时间专注于一个任务。

当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的代码到

和标签之间。这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。

当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的代码到

和标签之间。这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。

根据 W3C 网站，媒体查询由媒体类型和零个或多个媒体查询的条件表达式组成。通过使用媒体查询，外观呈现可以针对特定范围内的输出设备，而不需要改变内容本身。换句话说，媒体查询让您的网站在各种各种显示器上看起来都很好，从小的智能手机到大的电脑屏幕等等。

媒体查询取决于你的网站布局，所以对我来说为您提供一个现成可以使用的代码片段有点困难。但是，下面的代码对于大多数网站都是一个很好的起点。在这个例子中，#primary 是主要内容区域，#secondary 是侧栏。

从代码中你可以看到，我定义了两种规格：首先有一个最大宽度为1060px，为平板电脑优化的横向显示。#primary 占在其父容器宽度的67%，#senondary 占30%，再加上3%的左外边距。第二个规格是用于平板电脑和更小的屏幕尺寸。

由于智能手机的屏幕尺寸小，我决定给 #primary 设置100%的宽度，#secondary 也设置100%的宽度，他将在 #primary 下面。正如我已经说过的，你可能必须要对这段代码位进行修改才能适应您的网站的具体需求。

什么是响应式布局?我的理解是就是一套代码让他在不同的分辨率下通过局部调节，去适应不同的设备，不管你是电脑，pad.手机只要点开这个页面都可以很方便的浏览上面的信息。打个比方响应式布局就好比是一根皮带。对于腰粗的人扎皮带就多松几个扣子，对于腰细的人就少松几个扣子。整个网页就好比是这个皮带，响应式布局就相当于在皮带上设置几个扣子只要达到一定的标准整个网页的布局就能产生改变。

他的优点就是方便比较省事不需要去分别写不同的代码只需要对局部做一些修改就可以很方便实现，比较合适用在一些小网站，个人博客等等。

所以怎么样实现响应式布局如何让浏览器能自动的做出这些改变就很重要。配合媒体查询来实现这一过程，即media queries，针对不同的媒体类型定义不同的样式，从而实现响应式布局，还可以自定义不同分辨率下设置不同的样式。

常见的几种设备分辨率 :

1024分辨率以上：PC端

1024 ~ 768 : pad pro

768 ~ 450 : pad mini , mobile 横屏

450分辨率以下：mobile 竖屏

媒体查询的语法:

@media all and (min-width:500px){

}

针对特定范围:

@media all and (min-width:500px) and (max-width:800px){