随着移动端高速发展的现代,人们的浏览习惯已经从电脑端转移到移动端,且各种移动设备更新换代比较迅速,怎样使电脑端网站设计开发适应各种移动端浏览,是我们网站建设者不得不需要考虑的问题。下面小编就这个问题来着重讨论一下。
一、首先使移动端设备浏览时不能自动缩放,可以在<head></head>之间加入<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> 标签;其中initial-scale 指初始的缩放比例,minimum-scale指允许用户缩放到的最小比例,maximum-scale 指允许用户缩放到的最大比例,user-scalable 指 用户是否可以手动缩放,这样就可以禁止在浏览网站时,可以随意缩放了。
二、其次就是在样式中使用@media根据屏幕大小适应不同尺寸移动端浏览。比如@media (min-width: 720px){ 样式 }或(max-width: 720px){ 样式 },其中min-width表示最小尺寸,就是在尺寸大于720px时,适应这种样式,max-width表示最大尺寸;
比如:@media (min-width: 300px){ >=300的设备 }
@media (min-width: 540px){ >=540的设备 }
@media (min-width: 720px){ >=720的设备 }
表示的是当屏幕大于300px或540px或720px时,调用相对应的样式,需要注意的是,用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面。这时移动端浏览尺寸基本就可以自动适应了。
因此,在做网站建设开发时,需要根据不同尺寸的移动端设备调用不同的样式,分类样式越多就可以适应更多的移动端浏览 。
如没特殊注明,文章均为东郡网络原创,转载请注明来自:http://www.dongsem.com/xinwen/jiejuefangan/2016/0516/261.html