当前位置: 十堰网站建设制作 > 新闻动态 > 常见问题 >

PC端网站建设时怎样自动适应移动端浏览?

发表日期:2016-05-16 10:42 文章编辑:东郡网络 浏览次数:120 标签: 网站建设, 手机网站,

随着移动端高速发展的现代,人们的浏览习惯已经从电脑端转移到移动端,且各种移动设备更新换代比较迅速,怎样使电脑端网站设计开发适应各种移动端浏览,是我们网站建设者不得不需要考虑的问题。下面小编就这个问题来着重讨论一下。
一、首先使移动端设备浏览时不能自动缩放,可以在<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
  • 项目展示

    项目展示

  • 网站建设

    网站建设

  • 微信营销

    微信营销

  • 电商平台

    电商平台

  • 软件APP开发

    软件APP开发

0719-8658685/8659650

地址:十堰市上海路大美盛城II期梧桐花园4栋2单元25楼

400-071-9581

地址:襄阳市樊城区现代城3幢1202室

电话:0719-8658685/8659650

地址:十堰市上海路大美盛城.香榭丽小区2单元701

Copyright © 2018 东郡网络 All Rights Reserved