响应式网页设计和移动互联网
是基于webkit内核,所以我们可以完全使用viewport属性和media query技术实现网站的响应性:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
后面的initial-scale表示初始缩放,maximum-scale表示最大缩放比例,1意味着不能进行缩放。
当然依靠屏幕宽度来进行适配是最简单的方法,media query有很多参数可以使用比如orientation、aspect-ratio等,不太了解的可以查看这篇详细的介绍。 其实,media query是响应式网页设计中被用到最多的技术。 fluid grid(流体网格)很多项目都在使用网格技术(或者叫栅格),前几年960.gs很流行,但是随着屏幕分辨率的普遍提升,它已经不太适合当前需求了,于是最近几年fluid grid开始逐渐多了起来,这种技术其实也很简单,只是将格栅的单位由px变成%,用百分比来控制页面每列的宽度,从而实现宽度的自适应。 使用流体网格的网站能够根据屏幕宽度自动调整页面中每列的宽度,从而保证页面的完整展现和基本功能。这也是一种不错的方法。 flex boxflex box是css3中的新技术,它很强大,可以实现很多我们之前无法想象的自适应布局。 有时我们希望网站能够以webapp的外观呈现给手机用户,flexbox是个不二的选择。 比如,要实现这样的简单结构: 它很像一个app的结构,头部和底部固定,中间高度自适应,用flexbox可以简单实现:
|
||||
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |