【推荐理由】赠运费险
【优惠券】20 【券后价】59.00
【下单链接】18¥ CZ0001 G5fHdEqOsnB¥
“响应式网页设计(Responsive Web Design)”也就是自适应,就是可以自动识别屏幕宽度、并做出相应调整的网页设计;就是输入本站域名,手机、平板、PC端显示的效果不同的,但是URL确是相同的。响应式网站,利于SEO(统一了URL),利于用户体验,也利于用户分享。
如下图所示:
(手机端)
(平板界面)
还有一个PC端的界面。
这是怎么做的呢?
核心内容在于:导航栏和CSS的两个变化。
请注意HTML源文件里的一个判断语句:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 le - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放
有两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件,弃用。原因是博客CSS文件不大代码也不多,不需要多个CSS文件,也能减少并发。
第二种就是我现在用的这种,请直接查看本站CSS文件,
核心代码来了,开始研究响应式web设计朋友,CSS3 Media Queries是入门。
在CSS中加入语句:
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
大家可以看到我博客里有多个判断,1024px,768px,650px,500px,400px,350px。
这意味着宽度在1024px以下的屏幕,我博客会呈现六种不同的效果。但为了保证网页的连续性与完整性,同时也是图省事,下面六个CSS几乎相同。
唯一不同的是加入了display:none,不显示某些内容。所以通过CSS观察发现,屏幕越小,显示的内容就越来越少。
这也是文章开头为什么pad和移动端显示的界面不同的原因之一。
要注意的是由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。
附上DW自动生成的CSS案例:
@charset "utf-8"; /* 简单流媒体 注意: 流媒体要求您删除 HTML 中媒体的高度和宽度属性 http://www.alistapart.com/articles/fluid-images/ */ img, object, embed, video { max-width: 100%; } /* IE 6 不支持最大宽度,因此默认为 100% 宽度 */ .ie6 img { width:100%; } /* Dreamweaver 流体网格属性 ---------------------------------- dw-num-cols-mobile: 5; dw-num-cols-tablet: 8; dw-num-cols-desktop: 10; dw-gutter-percentage: 25; 灵感来自于 Ethan Marcotte 的“具有响应的 Web 设计” http://www.alistapart.com/articles/responsive-web-design 和 Joni Korpi 的“黄金网格系统” http://goldengridsystem.com/ */ /* 移动设备布局: 480px 及更低。 */ .gridContainer { margin-left: auto; margin-right: auto; width: 87.36%; padding-left: 1.82%; padding-right: 1.82%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } /* 平板电脑布局: 481px 至 768px。样式继承自: 移动设备布局。 */ @media only screen and (min-width: 481px) { .gridContainer { width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } } /* 桌面电脑布局: 769px 至最高 1232px。样式继承自: 移动设备布局和平板电脑布局。 */ @media only screen and (min-width: 769px) { .gridContainer { width: 88.2%; max-width: 1232px; padding-left: 0.9%; padding-right: 0.9%; margin: auto; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } }