<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>背景图片自适应</title><style type="text/css">html,body {padding: 0margin: 0}div {width: 100%height: 300pxbackground: url('images/slide_01_640x340.jpg') no-repeatbackground-size: 100% 100%}</style></head><body><div></div></body></html>
2.HTML代码的截图效果：
3.自适应最重要的样式如下：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
width: 100%
background-size: 100% 100%
4.最终的效果是这样：
随着移动互联网的发展，大多数企业在制作网站的时候，为了兼容各种设备，会制作出PC端、移动端二种版，根据不同的设备跳转到不同的网站，从而实现用户体验最优化。那么，问题来了，笔者遇到一个问题，有个企业老网站之前通过DIV+CSS布局的。电脑端打开网站布局排版都正常。当用手机打开其电脑版的网站时，只要涉及背景的代码，在手机浏览器上显示不完整，出现混乱的排版，具体案例如下：（手机浏览PC端的网站出现了对不齐的问题）针对这样的问题主要原因是div 在定义样式时 PC端样式只设置一个高度，不用设置宽度，是可以铺满全屏的，到了手机端无法铺满全屏了。比如你PC端定义的div样式可能是这样的 .flash { height:530pxmargin:0px autotext-align:center} 没有定义宽度，或者宽度你定义成width:100%。在手机端时，就会出现如上图的布局混乱的局面。那么，如何实现在手机端浏览pc端的网站也能像在电脑端显示的效果一样呢（左右对齐）。阿想同学做了一个简单的修改就可以了。就是所有的排版先不要动。在body元素里添加一个最小宽度（如：min-width:1200px）就可以解决。是不是很方便。至于手机端浏览器，为什么要显式的添加一个宽度才可以显示呢？ 请各位大神在下方法评论。。.body{
background:url(../image/pr_gb.png)//此处为你的图片
background-repeat:no-repeat
background-size:100% 100%
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）