189 8069 5689

快速教程分享之响应式网页设计

成都网站建设公司科技觉得做过wap站、做过siteApp、做过第三方,也做过独立APP,现在又做了个自适应的模板。所谓“响应式网页设计(ResponsiveWebDesign)”也就是自适应,就是可以自动识别屏幕宽度、并做出相应调整的网页设计。就是输入本站域名,手机、平板、PC端显示的效果不同的,但是URL确是相同的。

响应式网站,利于SEO(统一了URL),利于用户体验,也利于用户分享,如下图所示:

创新互联-专业网站定制、快速模板网站建设、高性价比望谟网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式望谟网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖望谟地区。费用合理售后完善,10多年实体公司更值得信赖。

(图为iphone显示效果)

(图为ipad显示效果,注意导航的变化)

(图为安卓手机微信上显示效果)

(PC版的直接就是现在这个界面了)

希望学习的朋友请自行查看本站源代码,请注意:

1,网站导航两个,一个PC端,一个移动端,注意加粗部分。

PC段导航:

请注意HTML源文件里的一个判断语句:

在head里加入这条元标签,那移动浏览器中页面将以原始大小显示,并不能缩放。不让浏览器缩放目的是保证网页能自适应屏幕的完整性,避免网页混乱。

width-viewport的宽度height-viewport的高度

initial-scale-初始的缩放比例

minimum-scale-允许用户缩放到的最小比例

maximum-scale-允许用户缩放到的最大比例

user-scalable-用户是否可以手动缩放

那么问题来了,如何让浏览器判断设备尺寸呢?

有两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件,弃用。原因是博客CSS文件不大代码也不多,不需要多个CSS文件,也能减少并发。

第二种就是我现在用的这种,请直接查看本站CSS文件,

核心代码来了,开始研究响应式web设计朋友,CSS3MediaQueries是入门。

在CSS中加入语句:

@mediascreenand(max-width:600px){/*当屏幕尺寸小于600px时,应用下面的CSS样式*/

大家可以看到我博客里有多个判断,1024px,768px,650px,500px,400px,350px。

这意味着宽度在1024px以下的屏幕,我博客会呈现六种不同的效果。但为了保证网页的连续性与完整性,同时也是图省事,下面六个CSS几乎相同。

唯一不同的是加入了display:none,不显示某些内容。所以通过CSS观察发现,屏幕越小,显示的内容就越来越少。

这也是文章开头为什么pad和移动端显示的界面不同的原因之一。

要注意的是由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。


分享名称:快速教程分享之响应式网页设计
分享链接:http://cdxtjz.cn/article/eggsdo.html

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。