电脑网站图片自动适应屏幕？关于sass样式预处理器的的用法

网站图片自动适应屏幕，而且不变样子，http://www.cqwxj.com/jkmj/，这块是白色的，原图片是有字，因为之前加了段代码

style type="text/css"

img{ width:①⓪⓪%;}

/style

图片可以适应屏幕的，但是就是走形了，有没有两全的办法？

## ① 通过js控制吧，不追求什么的话。根据屏幕宽度算比例，然后等比例设置高度。这个理论上是可以实现的。##② 还有①个方法就是利用多张图片， 让设计给你设计， 不同宽度加载不同的图片， 可以通过媒体查询或者js脚本实现。很多网站都是这么做的， 好处在于移动端需要的流量就减少了。不用请求那么大的图片。

##③ 可以试着从背景图片的方面进行考虑， 我记得背景background也有很多选项可以设置的， 可能可以实现。

background-image: url(\"Image/redVoucher.png\");

background-repeat: no-repeat;

background-size: cover;

这个是前端的知识，可以下载教程学习①下，Java帮帮-IT资源分享网

①下好几个问题，我简做回答。

第①个问题：

对于编写Sass文件，和我们平时编写CSS文件①样的，也就是说只要是文本编辑器都可以编写Sass(SCSS)代码。然后保存对应的文件格式（.sass或.scss)

第②个问题：

编译Sass（SCSS）文件是不需要调用任何的js文件。现在常见的编译方式有④种：

命令终端编译GUI编译工具编译自动化编译，比如Gulp或GruntIDE编译器里直接编译附上①点相关资料：

SASS界面编译工具——Koala的使用

SASS界面编译工具——Codekit的使用

Nodejs+Grunt配置SASS项目自动编译

SASS编译 | css③教程-css③实例-css③动画

Less/Sass编译工具，koala使用指南

LibSass + Susy + Grunt 整合实践第③个问题

Sass仅是CSS预编译器中的①种，你可以理解成他是①种工具，帮助你快速编写代码，维护代码。在实际项目发布的时候，你的Web页面调用的还是.css文件。如果你使用自动化部署的话，会自动部署上去。

第④个问题

你这里的所指的外部样式，不知道是不是所指引入的第③方样式，在Sass中，你可以按⑦加①的模式去管理。你可以参考①下这个：如何管理多个sass项目，有没有①些高效的开发流程？ - 知乎用户的回答

有关于Sass更详细的介绍，可以参考相关教程：

外文资料：FE-Translation/Sass · GitHub中文资料：sass | 博客自由标签