当前位置:
首页 / 资讯 / 技术文章

响应式布局网站,你了解了吗?

2018-09-07深圳网站建设公司网联科技发布者:平台标签:

小编在面试的时候被面试官问到过会不会做响应式网站,一听这个问题懵了。听没听说过呢?听说过,会不会做呢?不会。小编以前做过的网站都是PC端的,电脑上面看还可以,拿着手机看的话就会出现很多兼容性的问题,根本没有接触过响应式布局的网站,而如今移动端的发展呈火速上升趋势,如果不能兼容移动端,PC端和平板的话,从本质上来说发展是不会长久的,同理,如果公司的网站还是那种老式网站,只适应PC端,那么也会损失一大部分客户源。那么今天就先带大家了解一下响应式布局的原理和一些基础知识。

一.原理

因为移动端的崛起,老式网站不能更好的兼容移动端与PC端,会造成页面塌陷图片加载不出来等问题,所以为了解决这个问题,2010年Ethan Marcotte提出了响应式布局这一理念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。一时间受到了热烈的追捧。

二.基础知识

1.要允许网页宽度自动调整,因此我们要为网页的头部加入一行viewport元标签

这一行代码的意思是:

width=divice-width        网页宽度默认等于屏幕宽度

initial-scale=1           原始缩放比例为1.0,即网页初始大小占屏幕面积的百分之百,所以能够更好的兼顾PC端和移动端,网页自适应

2.具体演示

通过这些代码简单演示了一下,大家应该也注意到了一个关键词media,media通过不同的媒介类型条件定义样式表规则,从而让网站自适应手机端、平板、PC端,媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。

3.、流动布局(fluid grid)

"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。

4.相对字体大小

字体也不能使用绝对大小(px),而只能使用相对大小(em)。

以上是深圳外包公司网联科技为您提供的内容,如果有任何业务(深圳网站建设、深圳网站开发、深圳网页制作、深圳制作网站、微信营销、微信小程序开发)上的需要请联系我们,咨询电话0755-83658105。



扫二维码与项目经理沟通

我们在微信上24小时期待您的声音

解答:网站建设、APP开发、小程序开发

网联科技是一家以提供网站建设、APP、小程序开发、CRM系统开发为主的互联网开发公司。以客户需求为导向,客户利益为出发点,结合自身设计及专业建站优势,为客户提供从基础建设到营销推广的一整套解决方案,探索并实现客户商业价值较大化,为所有谋求发展的企业贡献全部力量。

网联科技微信公众号

相关信息