UECSS.COM » 自适应 http://uecss.com 记录我们自己的前端生活! Sun, 29 Aug 2010 13:27:11 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 图片自适应屏幕分辨率大小 http://uecss.com/image-adaptive-screen-resolution-size-of-the-2.html http://uecss.com/image-adaptive-screen-resolution-size-of-the-2.html#comments Mon, 25 Jan 2010 09:14:16 +0000 ailin0807 http://uecss.com/?p=100 我们在切图的时候常会遇到这样一个问题：Design of the head常是一个通栏很漂亮的一个图片，它的宽度超过了1024的屏幕分辨率，虽然我们现在用的到的都是大于1024的分辨率，但也不排除用1024或是比1024更小的分辨率。那这个时候这个非常漂亮的图片怎么办呢这个时候我们就可以使用图片随着分辨率的大小自动调整的方法来解决这个问题：

这里我们需要用到一个JS文件,点击下载这个JS:

http://cid-8127d59343265667.skydrive.live.com/self.aspx/NamipanPublic/2010-01-25/jquery.js

还有必须前面申明 :

<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dt-->&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" > </html>

不然在ie下面就是没用的 。这些都准备好之后，在img的下面加上这样一段代码：

<script type=”text/javascript”>
$(“#banner”).width(document.documentElement.clientWidth);
</script>

在图片上引用ID:

img src="" id="banner" alt="" 注：这个ID要一至，不然会没有效果。

这时我们会看到图片会自适应分辨率的大小图片会被自动缩放，但是可能会和Design有一些出入。我们可以采用第二种方法： 图片的变化只限于分辨率小于1300或是1024的情况下变化，那么我们的那段代码就要这样去写:

<script type="text/javascript">
if(window.screen.width <= 1024) { $("#banner").width(document.documentElement.clientWidth); }
</script>

这样我们就只会看到当分辨率小于1024的时候才会看到图片自动缩放了。

]]> http://uecss.com/image-adaptive-screen-resolution-size-of-the-2.html/feed 1