南海自适应网站定制-自适应网页设计的方法


随着3G、4G的普及,人们越来越多通过移动端上网。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?


响应式网站设计,也就是说一套页面就可以兼容PC端和移动端,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。一个域名、一套页面就可以兼容不同的端口。


手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。


很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个入口,会大大增加架构设计的复杂度。


于是,很早就有人设想,能不能“一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局?


1、在HTML头部增加viewport标签

在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:



这段代码支持Chrome、Firefox、IE9以上的浏览器,但不支持IE8以及低于IE8的浏览器。


2、在CSS文件尾部增加针对不同屏幕分辨率的规则

例如使用如下的代码,可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog,WordPress相关标签名称只需修改一下即可。


@media screen and (max-device-width: 480px) {

#divMain{

float: none;

width:auto;

}

#divSidebar {

display:none;

}

}


3、布局宽度使用相对宽度

网页总体框架可以使用绝对宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度,那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度,实际上更麻烦。


4、页面使用相对字体

在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),对于大多数浏览器来说,通常用 em = px/16 换算,例如16px就等于1em。


5、图片自适应

img标签的话,只需要设置 max-width: 100%;或width:100%; 语句为:img { max-width: 98%; }


css加载的background-image如何自适应大小呢,其实CSS3中是可以实现的,添加如下语句:background-size:100% 100%;


根据上面讲述的几点内容,可以发现从iPhone手机浏览到体验更佳的页面,但有一个问题没有解决,就是顶部导航栏navbar显示有问题,换行后被下面的文章盖住了,在导航栏divNavbar的样式里,加入 white-space:nowrap; overflow:hidden; 即可解决这个问题。


总之,根据以上步骤进行修改的话,可以很简单地将一个网站修改为适合多种设备浏览的页面,这对于通过移动端访问网站的用户来说,的确是一件好事。


以上就是南海自适应网站定制-自适应网页设计的方法,希望能对大家有所帮助。


分类:营销推广
本文链接:南海自适应网站定制-自适应网页设计的方法
上一篇:顺德官网定制也是营销的一种手段
下一篇:模板网站和南海官网定制的区别?

实时头条

观察行业视觉,用我们专业的角度,讲出您的心声
  • 意合云头条
  • 行业动态
  • 营销推广
MORE+
意合云2021年度冬季聚会 意合云2021年度冬季聚会 广东的冬天虽说不太冷,但在这阳光明媚,舒风凉凉的天气,是很适合外出聚餐活动。组织这次聚会让大家放松心情的同时,互相联系感情,更好地为下一阶段工作配合默契。活动场...
2021-12-15
小姐姐入职意合云一周年啦!!! 小姐姐入职意合云一周年啦!!! 伴随着时光的脚步,走过了春夏秋冬 这一年,你对业务的日渐熟悉 工作岗位上的每一次尝试 都激发意合云共同前进 意合云为小姐姐庆祝周年 “1”代表起航,要到达远方 ...
2021-11-02
意合云秋游记之海陵岛两天两夜 意合云秋游记之海陵岛两天两夜 海陵岛两天游 虽然已是秋天,但还是骄阳似火,最好不过选择到海边吹吹海风,看潮涨潮落,可以靠海居住,躺在床上也能聆听海浪声。 9月10日晚,佛山公司团队8点出发,...
2021-09-14
佛山小程序开发之小程序都能够为你的业务带来翻天覆地的改变 佛山小程序开发之小程序都能够为你的业务带来翻天覆地的改变 佛山小程序开发之小程序都能够为你的业务带来翻天覆地的改变一、为什么选择佛山小程序开发?1.专业团队:佛山小程序开发拥有一支技术过硬、经验丰富的专业团队,能够为你...
2024-03-20
佛山整站优化之帮助提升网站的可见性 佛山整站优化之帮助提升网站的可见性 佛山整站优化之帮助提升网站的可见性你想将自己的网站优化到更高的层次吗?你是否在寻找一种有效的方法来提升你的搜索引擎排名?那么,整站优化就是你所需要的。无论你是个...
2024-03-06
为什么说短视频营销好呢 为什么说短视频营销好呢 在短视频平台的兴起中,数据驱动和精准投放成为品牌营销的重要策略。短视频平台提供了丰富的数据分析和广告投放工具,品牌可以通过这些数据了解用户的兴趣、行为和互动方式...
2023-11-17
小程序开发公司之想拥有一个属于自己的小程序 小程序开发公司之想拥有一个属于自己的小程序 小程序开发公司之想拥有一个属于自己的小程序作为行业的领先者,我们致力于为客户提供高质量的小程序开发服务,帮助他们实现业务增长和品牌提升。无论你是想要创建一款电商...
2024-03-27
佛山站群营销之如何有效运用站群营销来推动业务增长 佛山站群营销之如何有效运用站群营销来推动业务增长 佛山站群营销之如何有效运用站群营销来推动业务增长首先,让我们来了解一下站群的概念。站群即多个网站的集合,这些网站的内容和主题有一定的相关性。这些网站可以是博客、...
2024-03-13
佛山小视频拍摄公司 佛山小视频拍摄公司 佛山市意合云营销策划有限公司(简称:意合云),于2013年开进这座悠久而充满希望的城市--佛山;意合云的前身是东莞市博士玩伴文化传播有限公司佛山分公司,东莞成立...
2024-01-11
文档反馈
您的改进建议 x
  • 意见反馈
  • 问题类型
  • 标记的内容