什么是移动适配

移动适配是指使不同尺寸的手机设备页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放。手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑安卓/IOS的各种尺寸设备上的兼容，针对移动端设备的页面，设计与前端实现更好地适配不同屏幕宽度的移动设备。

扩展资料：

完美的移动适配不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；显示的文字、等其他元素大小合适，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。

适配不同屏幕宽度以及不同dpr，通过动态设置viewport(scale=1/dpr) + 根元素fontSize + rem, 辅助使用vw/vh等来达到适合的显示。

若无需适配可显示1px线条，也可以不动态设置scale，只使用动态设置根元素fontSize + rem + 理想视口。

问题够棒1如果够规范的话，在>DIV+CSS适配浏览器,意思就是对于div+css的布局，在各个浏览器中的显示，而且是正确的显示，也就是IE，chrom、firefox等等，要满足也就是说在各个浏览器中不会出现错位等问题，要实现这些就需要通过hack，或者是说一些浏览器的兼容技术来实现，如一个透明度，一般在ie中用的是filter:alpha(opacity=0);这个属性来设置div或者是块级元素的透明度，而在firefox中，一般就是直接使用opacity:0,要做到兼容就是在css中2种都写到，具体看下代码：\x0d\\x0d\\x0d\#div1{\x0d\width:200px;\x0d\height:600px;\x0d\margin:0 auto; \x0d\opacity:0;\x0d\filter:alpha(opacity=0); //0 代表的是隐藏，就是透明度最低。\x0d\}\x0d\\x0d\\x0d\\x0d\\x0d\

测试文字。\x0d\\x0d\\x0d\

回答于 2022-11-16

分享几种适配方案，供大家参考。

1 <img> 标签引用的

我们以一张 300200px 的照片为例：

1
<img src="/photojpg" style="width:300px;height:200px;" />

如果想让这张在 Retina 屏幕下达到应有的显示分辨率，只需使用该照片的源文件导出一张清晰的 600400px 的，我们将其命名为 photo@2xjpg，替换现有的即可：

1
<img src="/photo@2xjpg" style="width:300px;height:200px;" />

换成 @2X ，在 Retina 屏幕下的显示就清晰多了，可谓细节毕现。不过在普通屏幕下，的显示需要经过浏览器的压缩，一些老版本浏览器如 IE6、7 会显示得非常失真，同时大尺寸的会占用更多的带宽，增加页面加载的时间，降低用户体验。通过 JS 的辅助，可以让在普通屏幕和 Retina 屏幕下做到自动适配：

<img class="photo" src="/photojpg" style="width:300px;height:200px;" /> <script type="text/javascript">$(document)ready(function () {
if (windowdevicePixelRatio > 1) {
var images = $("imgphoto");
imageseach(function(i) {
var x1 = $(this)attr('src');
var x2 = x1replace(/()(\\w+)/, "$1@2x$2");
$(this)attr('src', x2);
});
}
});</script>

Retinajs 提供了更加完善的解决方案，自动匹配屏幕分辨率的同时，还可以检测服务器上是否存有当前的 @2X 版本，以决定是否替换。

优点：

*** 作简单

普通屏幕下不会加载 @2X 的大尺寸，节约带宽

缺点：

Retina 屏幕下，标准和 @2X 都会被加载

在显示过程中会被重绘

有些老版本浏览器下存在兼容问题

2 CSS 背景

21 Meta Queries + background-size

我们以一张 logo 的背景图为例，首先我们定义 logo 的尺寸为 10040px，然后为 #logo 设定一个 10040px 的背景 logopng，

#logo {
width: 100px;
height: 40px;
background: url(/logopng) 0 0 no-repeat;}

接下来通过 Meta Queries 判断设备的最小显示像素比，如果大于等于15的话，为 #logo 设定一张 20080px 的背景 logo@2xpng，然后通过设置 background-size 让背景图显示为 logo 该有的尺寸。这里的显示像素比我们选择 15 作为阈值，是为了适配除苹果以外的高分辨率设备，比如三星的 Android Pad。

@media only screen and (-webkit-min-device-pixel-ratio: 15),
only screen and (min--moz-device-pixel-ratio: 15), / 注意这里的写法比较特殊 /
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 15) {
#logo {
background-image: url(/logo@2xpng);
background-size: 100px auto;
}}

这样，对于普通的显示设备或是不支持 Meta Queries 的浏览器，会显示标准的背景图，对于支持 Meta Queries 的 Retina 设备，会显示 @2X 的背景图。（ IE6、7、8 均不支持 Meta Queries 和 background-size ）

如果仅是为了适配当前的苹果 Retina 显示屏，也可以直接判断设备的显示像素比是否等于2：

@media only screen and (-webkit-device-pixel-ratio: 2),
only screen and (-moz-device-pixel-ratio: 2),
only screen and (-o-device-pixel-ratio: 2/1),
only screen and (device-pixel-ratio: 2) {
}

优点：

只会加载匹配当前设备的最适

跨浏览器兼容

缺点：

如果背景很多的话，需要编写非常冗长的代码

22 image-set

我们同样以之前的 logo 为例，实现方式如下：

#logo {
background: url(/logopng) 0 0 no-repeat;
background-image: -webkit-image-set(url(/logopng) 1x, url(/logo@2xpng) 2x);}

优点：

让的链接地址在 CSS 中更加集中，代码的维护成本降低

可以让浏览器获取多种尺寸的文件，根据屏幕分辨率或是其他一些因素选择适当的进行展示，在的匹配上可以做到更加智能

缺点：

image-set 现在只是 CSS4 的一个草案，目前只有 Webkit 内核的 Safari 6+ 和 Chrome 21+ 支持该属性

最后的这条缺点很致命，期待 W3C 早日将 image-set 写入标准之中，让更多的浏览器支持这种写法。

3 使用 SVG 可缩放矢量图形

与只能记录像素信息的位图相比，矢量图在不同分辨率下的适配有着先天的优势，目前大多数现代浏览器都已经支持基于 XML 的 SVG 格式图形的显示，网页中一些线条简单的 Logo 、图标或特殊字形，如果转成矢量的 SVG 格式来显示，在 Retina 屏下的适配也就搞定了。

制作 SVG 格式，可以使用 Adobe Illustrator 或免费的替代软件 inkscape 。

使用 SVG 格式，可以像我们使用其他格式的一样，用 HTML 的 <img> 标签引用，或用 CSS 的 background-image 、 content:url() 属性，需要注意的是，无论用哪种形式，最好定义一下的尺寸。

1
<img src="examplesvg" width="300" height="200" />

/ Using background-image /image {
background-image: url(examplesvg);
background-size: 300px 200px;
width: 300px;
height: 200px;} / Using content:url() /image-container:before {
content: url(examplesvg);
/ width and height do not work with content:url() /}

如果需要兼容 IE6、7、8 或是其他一些不支持 SVG 的浏览器，需要额外用到 PNG 格式的副本（关于 PNG 格式 Alpha 通道的兼容问题这里不做讨论）。

31 <img> 标签引用 SVG 格式

在 HTML 的 <img> 标签中，增加一个 PNG 格式的自定义属性

1
<img src="examplesvg" data-png-fallback="examplepng" />

然后引入 jQuery 和 Modernizr 判断当前浏览器是否支持 SVG ，不支持的话使用 PNG 替换 SVG 。

$(document)ready(function(){
if(!Modernizrsvg) {
var images = $('img[data-png-fallback]');
imageseach(function(i) {
$(this)attr('src', $(this)data('png-fallback'));
});
}});

32 CSS 背景引用 SVG 格式

引入 Modernizr ，将 CSS 改写成以下形式即可：

image {
background-image: url(examplepng);
background-size: 30p0x 200px;} svg {
image {
background-image: url(examplesvg);
}}

为了获得最佳的跨浏览器兼容效果，避免在 Firefox 和 Opera 下出现光栅问题，制作的 SVG 最小要达到父容器的尺寸。

优点：

可以适配任意分辨率

维护成本较低

矢量图可以无限伸缩，更加面向未来

缺点：

不适合复杂的图形，复杂的矢量图形可能会导致文件过大

不同的抗锯齿算法，可能会带来不同的浏览感受

IE6、7、8，早期的 Android 浏览器，及其他一些较老的浏览器无法提供对 SVG 的原生支持，使用 <img> 标签的方式可能会导致浏览器下载 SVG 文件

4 Favicon

Favicon 的 Retina 适配比较容易，或许你的现在 Favicon 在 Retina 下就已经显示得非常清晰，如果不是这样，使用 ico 编辑工具，创建一个包含 1616 和 3232 两种内建图像的 ico 文件，替换现有的 Favicon 即可，浏览器会根据分辨率的大小自动匹配内建图像的尺寸。

至于 ico 编辑工具，Windows 下推荐使用 IconXP ，Mac 下推荐 Apple’s Icon Composer（Graphic Tools in Xcode 中）。

想要一套代码就完全适配pc和手机是不太可能的，不过对于一般的需求还是可以满足的
只需要在html的开头加上几行代码(可以百度html如何自适应编程)，另外对于width、font-size等应尽量使用%,em等

---