响应式网页设计和移动互联网

这样做的好处是显而易见的，移动终端不会加载多余的资源，也不会因为PC端的样式而重绘页面，同时也不会影响PC端的表现。

流体图片(fluid image)

页面中的图片有时会比手机/平板的屏幕（viewport）宽，这样会将页面容器撑开，但是移动浏览器又不能scroll，结果图片被切掉一部分，然后还会有一部分内容被隐藏掉，用户看不到。

解决这个问题的方法很简单，将img的最大宽度设置成100%就可以了：

img{max-width:100%}

嗯，这里的前提是，没有给img标签设置宽度和高度，否则显示会有问题。另外不建议直接设置width=”100%”，因为会把小图拉大，模糊显示。

同理，video标签和iframe标签的宽度也可以这样做，而且最好不要使用iframe，宽度是个问题，性能也是一个方面吧。

CSS3 image

这个方法有些惊艳

我们都知道可以用::before和::after伪元素+content属性来动态显示一些内容或者做其它很酷的事情，而且在CSS 2.1中即被支持。不过content属性在CSS 2.1中只能用于这两个伪元素中，而在CSS3中，任何元素都可以使用content属性了，这个方法就是结合css3 的attr属性和HTML自定义属性的功能：

<img src="image.jpg" 
	data-src-600px="image-600px.jpg" 
	data-src-800px="image-800px.jpg" alt="">

然后用media query来动态赋值：

1
2
3
4
5
6
7
8
9
10

@media (min-device-width:600px) { 
	img[data-src-600px] {
		content: attr(data-src-600px, url); 
	}
}
@media (min-device-width:800px) {
	img[data-src-800px] {
		content: attr(data-src-800px, url);
	}
}

当然，这种方法也有不足之处，比如PC端宽屏幕需要加载两个图片文件，然后我们也要为此准备多张图片文件等。

pre标签

有的网站，比如，像前端观察这样的技术博客，会用pre来显示源代码，而浏览器对pre标签默认设置white-space:pre，这样，代码就不会换行，从而撑开子容器，造成内容被隐藏的问题：

右边的文字被隐藏掉了。

解决方法很简单：

pre{
	white-space:pre-wrap
	word-break: break-word;
	word-wrap: break-all;/*如果要兼容IE，可以加上这句，连续字母断行的问题伤不起啊。。。。*/
}

当然，不只是pre标签，关键是white-space和word-break属性的值。

嗯，主要的技术和技巧其实就这

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!