响应式设计
文章平均质量分 83
whqet
这个作者很懒,什么都没留下…
展开
-
响应式布局的相册效果
<!--p {text-indent:2em; line-height:24px; font-size:14px}h1, img {margin:0.6em 0}h1 {font-size:16px; line-height:22px}-->响应式布局的相册效果,效果如下图所示,或者看看demo,记得调整浏览器宽度哟,或者直接下载。开始制原创 2013-05-17 14:42:18 · 3535 阅读 · 0 评论 -
响应式表格
来继续看一个响应式表格,重点学习媒体查询,智能手机中将表头隐藏,利用:before伪对象伪造表头,效果见如下图所示。原创 2014-03-18 20:10:47 · 5720 阅读 · 7 评论 -
SASS Mixin实现响应式布局
好的,今天我们来研读下css大牛Chris Coyier的利用SASS实现响应式布局的解决方案(Simple Technique for using Sass for Rows)。列间空隙的处理,每行的最后一列没有空隙,前面的其他列具有统一的空隙,水平和垂直方向的空隙相等。每列宽度采用百分比的形式进行计算,每列宽度=(总宽度-空隙总宽度)/列数=(总宽度-(列数-1)*空隙宽度)/列数。原创 2014-03-30 08:58:39 · 6435 阅读 · 1 评论 -
SASS优化响应式断点管理
当你需要搞定响应式布局时,一堆堆的媒体查询、大量的属性、属性值往往可以把你搞颠,SASS(或者诸如此类的预处理器)被认为是处理响应式断点的最佳利器。说到响应式断点处理,很多种方式涌上心头,经常有人问哪种方式最优,正如前端开发领域的大多数问题一样,这个问题同样没有标准答案,我们需要具体问题具体分析。翻译 2014-05-22 20:52:46 · 5705 阅读 · 0 评论 -
响应式菜单
今天来看一个响应式布局菜单效果,重点应用媒体查询、css3绘图、jquery简单应用.原创 2014-03-18 14:19:15 · 4190 阅读 · 1 评论 -
Flexbox响应式菜单
这两天在研究flexbox,来看一个Flexbox实现的响应式菜单。原创 2014-03-09 20:36:26 · 4171 阅读 · 0 评论 -
响应式奶油立体字效果
好的,CSS3演武场今天继续,来看一个由text-shadow实现的响应式立体字效果。前端开发whqet,关注web前端开发技术,分享网页相关资源。原创 2014-03-11 08:25:42 · 4747 阅读 · 1 评论 -
2014年启用响应式网页的5个理由
响应式网页是你今年的最优选择吗?如果不是,那你得看看《2014年设计趋势》这篇文章,然后启用这个流行技术。我列出了你应该尽快使用响应式网页的5个理由。翻译 2014-03-01 21:52:35 · 2902 阅读 · 1 评论 -
响应式网页设计学习笔记
一、why随着移动技术的迅速普及,越来越多的人通过不同设备来浏览网页,为了便于不同设备的用户访问,网页经常需要针对不同设备进行不同的设计,不但费时费力,而且不同界面容易造成用户体验的不一致。响应式web设计正是由此而生。图1-4可以充分说明响应式网页设计的必要性。图1.当前流行的网页浏览设备图2.网页运行于不同的操作系统图3.当前主流的屏幕尺寸对比原创 2013-05-06 12:27:19 · 3956 阅读 · 3 评论 -
5个常见响应式设计陷阱及解决方案
想象这样的场景: 您刚刚创建了一个**杰出的**响应式设计,然后准备在移动设备中测试一下。在您意想不到的地方产生了一些问题,文字乱糟糟的,动画波涛汹涌,表单没有呈现您设计的样式。然后花费N多时间修复这些问题,您可能抓狂地把电脑扔出窗外砸中邻居家的猫。翻译 2015-09-12 11:55:01 · 4456 阅读 · 0 评论