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

成都网站建设公司科技觉得做过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和移动端显示的界面不同的原因之一。

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

标题名称：快速教程分享之响应式网页设计
路径分享：/article10/eggsdo.html

成都网站建设公司_创新互联，为您提供搜索引擎优化、网站建设、Google、品牌网站建设、服务器托管、品牌网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联