广州网站建造集团官网 老直营威尼斯网址开户
老品牌威尼斯网址开户 吾们 效劳 网站建造 移动应用 案例 报道 联系
咨询热线:13711534025

期待聆听您的声音

13711534025

不忽悠,不作恶,不欺诈;敬天理,存良知,思利他。
QQ咨询 QQ咨询 QQ咨询
广州总部 深圳 佛山 广西

与吾们一起分享美好

响应式网页策划的快速教程

发布时间:2014-10-03 发布作者:老直营威尼斯网址开户 查阅次数:1618次 标签:响应式网页策划

自适应网页策划 响应式网页策划 响应式 移动建站

 

  本教程较适合个人站。做过wap站、做过siteApp、做过第三方,也做过独立APP,Now又做了个自适应的模板。所谓“响应式网页策划(Responsive Web Design)”也就是自适应,就是可以自动识别屏幕宽度、并做出相应调整的网页策划。就是输入老品牌威尼斯网址开户域名,手机、平板、PC端显示的成果不同的,但是 URL确是同样的。

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

  

自适应网页策划 响应式网页策划 响应式 移动建站

 

  (图为iphone显示成果)

  

自适应网页策划 响应式网页策划 响应式 移动建站

 

  (图为ipad显示成果,care导航的改动)

  

自适应网页策划 响应式网页策划 响应式 移动建站

 

  (图为安卓手机WeChat上显示成果)

  

自适应网页策划 响应式网页策划 响应式 移动建站

 

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

  这是怎么做的呢?

  主要始末在于:导航栏和CSS的两个改动。

  瞩望进修的朋友请自行查看老品牌威尼斯网址开户源代码,请care:

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

  PC段导航:

  

自适应网页策划 响应式网页策划 响应式 移动建站
 <#CACHE_INCLUDE_NAVBAR#> 

 

  移动端导航:

  

自适应网页策划 响应式网页策划 响应式 移动建站
 

<#ZC_BLOG_TITLE#>

 

 

  请careHTML源文件里的一个判断语句:

 

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

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

  initial-scale - 初始的缩放比例

  minimum-scale - 允许用户缩放到的较大比例

  maximum-scale - 允许用户缩放到的较小比例

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

  so小case来了,如何让浏览器判断设备尺寸呢?

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

  第二种就是我Now用的这种,请直接查看老品牌威尼斯网址开户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和移动端显示的界面不同的原因之一。

  要care的是由于网页会按照屏幕宽度调整计划,以是不能使用绝对宽度的计划,也不能使用具有绝对宽度的圆素。这一条非常要紧,否则会出现横向滚动条。

  参考代码:

  主要CSS文件,适用于尽数程序http://lusongsong.com/zb_users/theme/LuSongSong/style/LuSongSong-Index.css

  代码文件,鼠标右键查看老品牌威尼斯网址开户源代码(care导航代码的改动),此代码仅供zblog用户参考。

  图省事的、试用WP系统的朋友可直接下载张力博客供给的WordPress性状:http://zhangliseo.com/wp-didiao

  使用asp版卢松松性状的朋友,可以直接把老品牌威尼斯网址开户的CSS拿去用。

  总结:

  只要制作两个导航,能看懂CSS文件就可以搞定,照猫画虎,人人都能做出响应式的网页策划,看似很难,就现实来说很easy。

  来源:卢松松博客

网站策划必备:极客Web上端开发资源集锦

网站的性状小谈

吾们的地位

广州 广州市天河区岗顶百脑汇高技术大厦B塔27楼 020-6235 2949

深圳 深圳市南山区汉京万国大厦18A 159 8916 9178

广西 茂名市茂南区油城三路广西创业创新孵化基地B110 159 8916 9178

吾们的效劳

网站及移动应用 牛逼直营网站 APP开发 小程序开发 WeChat运营

系统应用开发 OA/ERP/CRM/HR系统开发 教学管理系统 电商系统 应用型软件系统定制开发

了解吾们

集团官网简介 联系吾们 吾们的案例 讯息报道

使用条款 隐私声明 Cookies

© 2009-2020 老直营威尼斯网址开户 版权一切 广ICP备16051058号

XML 地图 | Sitemap 地图