html背景图片自适应屏幕大小，html5设置图片自适应屏幕宽度（手机端自适应-rem）

关于【html背景图片自适应屏幕大小】，html5设置图片自适应屏幕宽度，今天乾乾小编给您分享一下，如果对您有所帮助别忘了关注本站哦。

内容导航：1、html背景图片自适应屏幕大小：html5设置图片自适应屏幕宽度2、手机端自适应-rem

1、html背景图片自适应屏幕大小：html5设置图片自适应屏幕宽度

HTML网页的开发中，需要对大小不一的屏幕兼容，使图片在不同的设备中可以展示预期的效果。自适应屏幕的宽度，利用css中background属性可以实现

工具/材料

浏览器，文本编辑器

操作方法

新建一个HTML文件，代码如下图

打开HTML文件所在的文件夹，双击文件，跳转到浏览器

改变浏览器大小，发现图片没有变化，显示不全

在所在文件夹下，新建一个样式文件，命名为 auto.css，代码如下

在HTML文件中加上对样式文件的引用，返回文件夹，双击HTML文件，发现浏览器的变化会引着图片一起变化，自适应屏幕的大小

声明：本篇经验系「www.coozhi.com」原创，转载请注明出处。

2、手机端自适应-rem

1rem 等于 文档流的font-size通过修改 html的font-size实现自适应假设屏幕宽度为 750 clientwidth设计稿宽度 750 materialWidth将设计稿与当前设备比例放大100倍关系赋值给html，则 1 rem 就等于 (设计稿与当前设备比例 * 100)html值则 实际值（rem） =100* 比例 * 设计稿像素所以为了较好的计算，建议采用开发选用的屏幕分辨率与设计稿一致以 1比1 计算。例如：750px的设计稿，开发屏幕750px，使得 1rem 等于 100px, 100%宽度就为 7.5rem;320px的设计稿，开发屏幕320px，使得 1rem 等于 100px, 100%宽度就为 3.2rem;以此类推。。。所以取值为 设稿大小 除于 100，例如：设计稿宽度为 200px，则rem取值为 2rem以此类推。。。注意浏览器支持文字最小像素,所以在 比例中 乘 100，避免rem布局错乱

const flxeJs = function (doc, win, materialWidth){ materialWidth = materialWidth || 750 const docEl = doc.documentElement const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' const recalc = function(materialWidth){ var clientwidth = docEl.clientWidth if(!clientwidth)return; docEl.style.fontSize = 100 * (clientwidth / materialWidth)+ 'px'; }.bind(null,materialWidth) if(!doc.addEventListener)return; win.addEventListener(resizeEvt,recalc, false); doc.addEventListener('DOMContentLoaded' , recalc, false)}export default flxeJs

这就是关于《html背景图片自适应屏幕大小，html5设置图片自适应屏幕宽度（手机端自适应-rem）》的所有内容，希望对您能有所帮助！