7x24小时售后服务
5倍故障时长赔付
15天无理由退款
N对一管家服务
让我们的顾问联系您
响应式站点,利于SEO(统一了URL),利于客户体验,也利于客户分享
核心内容在于:导航栏和CSS的两个变化。
希望学习的朋友请自行查看本站源代码,请注意:
1,站点导航两个,一个PC端,一个移动端,注意加粗部分。
PC段导航:
<#CACHE_INCLUDE_NAVBAR#>
移动端导航:
<#ZC_BLOG_TITLE#> <#CACHE_INCLUDE_FUNCTION28#>请注意HTML源文件里的一个判断语句:
在head里加入这条元标签,那移动浏览器中网页将以原始大小显示,并不能缩放。不让浏览器缩放目的是保证网页能自适应屏幕的完整性,避免网页混乱。
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许客户缩放到的最小比例
maximum-scale - 允许客户缩放到的最大比例
user-scalable - 客户是否可以手动缩放
那么问题来了,如何让浏览器判断设备尺寸呢?
有两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件,弃用。原因是blogCSS文件不大代码也不多,不需要多个CSS文件,也能减少并发。
第二种就是我现在用的这种,请直接查看本站CSS文件,
核心代码来了,开始研究响应式web设计朋友,CSS3 Media Queries是入门。
在CSS中加入语句:
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
大家可以看到我blog里有多个判断,1024px,768px,650px,500px,400px,350px。
这意味着宽度在1024px以下的屏幕,我blog会呈现六种不同的效果。但为了保证网页的连续性与完整性,同时也是图省事,下面六个CSS几乎相同。
唯一不同的是加入了display:none,不显示某些内容。所以通过CSS观察发现,屏幕越小,显示的内容就越来越少。
这也是文章开头为什么pad和移动端显示的界面不同的原因之一。
要注意的是由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。
参考代码:
核心CSS文件,适用于任何程序http://lusongsong.com/zb_users/theme/LuSongSong/style/LuSongSong-Index.css
代码文件,鼠标右键查看本站源代码(注意导航代码的变化),此代码仅供zblog客户参考。
图省事的、试用WP系统的朋友可直接下载张力blog提供的WordPress主题:http://zhangliseo.com/wp-didiao
使用asp版卢松松主题的朋友,可以直接把本站的CSS拿去用。
本文来源于成都网站建设公司、成都网站设计制作公司与成都APP开发公司-桔子科技公司!
成都网站建设,成都网站设计,成都网站制作,成都网页设计,成都网站建设公司 ,成都网站设计公司, 成都网站制作公司,成都网页设计公司,成都手机网站建设,手机网站建设,成都APP开发,APP开发,成都建网站,成都做网站,成都微信网站建设,成都微商城网站建设,成都商城网站建设,成都平台网站建设,成都响应式网站建设,成都微信营销,成都网络公司。
7x24小时售后服务
5倍故障时长赔付
15天无理由退款
N对一管家服务
让我们的顾问联系您
川公网安备 51010502010278号
ICP备案号:蜀ICP备10206569号-2