首页 新随笔 联系 订阅 管理 个人网站

随笔分类 -  响应式布局

摘要:如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏... 阅读全文
posted @ 2015-03-09 09:37 __不粘锅 阅读(140) 评论(0) 推荐(0)
摘要:点击此处跳转查看 阅读全文
posted @ 2015-03-04 17:12 __不粘锅 阅读(127) 评论(0) 推荐(0)
摘要:“自适应网页设计”到底是怎么做到的?其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。 1. 2. 复制代码 viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-... 阅读全文
posted @ 2014-08-14 21:53 __不粘锅 阅读(556) 评论(0) 推荐(0)
摘要:构:@mediaall and( min-width:600px){样式表:即.mainbox{ background:#fff000;}}all可指定的值:样式表:使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式,譬如以下语句指定了当窗口宽度小于640px时所使用的样式... 阅读全文
posted @ 2014-08-13 22:13 __不粘锅 阅读(342) 评论(0) 推荐(0)
摘要:跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面,常规来讲一个跨终端页面,在宽屏的电脑上看和在小屏幕手机上看的布局是不同的,布局不同的原因是为了让读者更好地阅读你的页面,见下图:这里有点要提到的是,我们常规会将PC版的页面和移动端设备的页面独立开来设计,这样会让PC端的页面布局更灵活... 阅读全文
posted @ 2014-08-13 21:03 __不粘锅 阅读(228) 评论(0) 推荐(0)