设计笔记

  • 重点来啦
  • 首页
  • 作品
  • 代码
  • 随笔
  • 关于博主
    • 豆瓣书影
  • 友情链接
  • 文章归档
  • 榜上有名
  • RSS Feed
  • GitHub
  • Twitter
  • Link

喜欢这款主题

抢先体验

优雅的响应式

  • Tokin
  • 2013-02-21
  • 1

响应式主题给我的感觉真是遥不可及,那些主题很有质感,一看就是高级料,我还真认为我做不来,,就算弄出来也要费很大力气,没想到。。。今天查了下资料,再理解理解,就折腾出来了。貌似很简单的说

好吧,其实很早就想学这东西了,不过一直没动手查相关资料,这两天和Ashe聊天的时候,谈到了D7这个主题,然后自然就谈到了自适应,唉,Ashe对我期望还是蛮大的,他想让我也学学这玩意儿,好吧,既然我被包养了,当然不能只吃不干,我也努力有求必应,能力范围内的努力做到,让我学习自适应这东西,和我本身又没啥冲突,而且我也打算学习下,所以当然满口答应咯

好吧,说正事,关于响应式,百度百科的答案是这样的:

  • 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
  • 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

这东西对我没丝毫价值诶,想要学习,还是要靠自己。。。于是无节操的下载了几个响应式模板。。。

前后找了找,我以为是js控制的响应式,后来把js都删除了,发现还是能自适应,于是果断查看css。。。发现了诡异的东西::::::

重点来啦

@media handheld and (max-width:950px), screen and (max-device-width:950px), screen and (max-width:950px) {
这里是响应式的css
}

好吧,结合强大的网络资源,我了解到、、、黄色部分意思是当浏览器宽度小于950px,执行绿色部分的css

好吧,竟然如此简单,用到的是Css3。。。没节操啊

如果你也想给主题弄成响应式的,那就动手吧,,,结合自己的大脑,ComeOn

我是果断给主题弄了下,,,目前还只有小于950px的效果,,后期慢慢再加几个

另外如果想看我博客不想有广告的话。。。那就把浏览器缩小一下,,,清新无广告就出来啦

 

© 2025 设计笔记
Theme by Wing
  • {{ item.name }}
  • {{ item.name }}