rem在响应式布局中的应用by Liu Yue/2017-07-09 标签: 响应 布局 rem 应用rem在响应式布局中的应用最近做了一些响应式的页面,遇到了一些问题,想了些解决方法,在这里总结一下。目前响应式的主流实现方式是百分比布局,加上媒体查询@media screen。关于媒体查询还有媒体查询的一些兼容性问题,网上介绍的很多其实响应式布局中主要困扰我们的问题还是元素的等比缩放。目前的元素的等比缩放主要有以下两种解决方案。实现等比缩放的一些方案1. 利用img元素的等比缩放特点这种情况最为常见,只需要百分比设置img元素的宽度,img元素的高度就会随着宽度等比缩放。这也是我们在响应式界面......了解更多
自适应与响应式的异同by Liu Yue/2017-01-27 标签: 响应 异同 适应 目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念。在这先说明下这两者的异同:自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone/iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。于是,很早就有人设想,......了解更多
关于响应式设计最新的适配方案by Liu Yue/2017-07-12 标签: 关于 响应 设计 适配 最新 方案 截至目前最靠谱的响应式设计讨论 https://www.w3cplus.com/css/vw-for-layout.html 记录一下......了解更多
响应式设计笔记by Liu Yue/2017-02-21 标签: 响应 设计 笔记HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表。比如,一个页面在屏幕上显示时使用无衬线字体,而在打印时则使用衬线字体。screen和print是两种已定义的媒体类型。媒体查询让样式表有更强的针对性,扩展了媒体类型的功能。下面的css是应用在宽度小于等于960px的屏幕上:@media screen and (max-width: 960px) { body { background-color: red; } } 此外,......了解更多
响应式设计之子元素的数目检测by Liu Yue/2016-10-09 标签: 检测 之子 响应 数目 元素 设计在响应式设计中,通用做法是根据屏幕尺寸,显示不用的样式。如果碰到需求,希望根据子节点的个数,显示不同的样式呢?<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></......了解更多