随着智能手机等小屏移动设备的兴起，以前只针对桌面电脑的网站必不可少的向自适应网站页面模式迁移，而在这其中，max-width这个新的CSS属性在自适应设计中占有举足轻重的作用。我通常都是将img, iframe, 和 embed 等标签设置成 max-width: 100%，这样，它们的尺寸就会跟随它们的父元素一样扩展和收缩，就能自适应各种平面尺寸/分辨率的移动设备了。
　　但最近我发现了一个问题，就是当采取自适应技术后，图片在页面上表现的尺寸大小往往不是它们的真实大小，那么，如果我想获取页面上一个图片的真实长度宽度，该怎么办呢？最近偶然在MDN上发现了一个从未听说的新属性，正好能帮我解决这个问题！
JavaScript代码　　使用JavaScript，我们能获取一个图片的真实宽度和高度：
myImage.addEventListener('onload', function() { console.log('我的宽度是: ', this.naturalWidth); console.log('我的高度是: ', this.naturalHeight);});　　我还是第一次看见naturalWidth 和 naturalHeight这两个只读属性，真是两个非常有用的属性。不论你如何用CSS来变换一个img元素的高度和宽度，图片的原始大小都能用它们获取到。需要提醒的一点是，你不需要等待图片成功加载到页面后，才能正确的访问这两个属性，所以我它们放到了onload事件里。
分享这篇文章： 　　十分形象的迷宫搜索算法，能看的计算机如何一步一步的探索路径，障碍物，最终确定最佳，最近的路线图
　　这里我们用纯CSS技术表现出30种动物的碎片拼图形象，这30动物，非常的可爱，但不幸的是，它们都是濒临灭绝的动物，它们的生存情况正面临着危机。
　　这是一个用HTML5制作的智力游戏，有相当的难度。每个方块一面橙色，一面蓝色。点击一个方块，这个方块的颜色会翻转，并且，与它邻接的方块的颜色也会翻转。使拼板全部变成蓝色， 你就算过关了。
　　虽然并不是Adobe的Photoshop发明了混合模式，但它的实现效果是最真实的。但现在，你不需要使用Photoshop来运用混合模式美化你的图片，因为CSS3里提供里动态的实现这种效果的方法。
HTML5+CSS3特效幻灯片(impress.js) 　　HTML5和CSS3的诞生和普及必将对传统行业带来巨大的冲击，像微软PPT这样的软件必将慢慢转移的在线的HTML5+CSS3上，因为用HTML5+CSS3实现幻灯片不仅更简单、容易，而且功能更强调，特效更绚丽。impress.js就是这样一款可以让你轻松利用CSS3动画实现具有神奇特效的幻灯片工具。