菜单

CSS3响应式自适应尺寸视窗单位vw、vh详解

vw、vh、vmin、vmax是CSS3新增的视窗单位,同时也是相对单位,它相对视窗(Viewport)大小的百分比。 什么是视窗? 视窗即Viewport,是浏览器实际显示内容的区域,不包括工具栏、地址栏、书签栏。 视窗单位说明 vw - 视窗宽度的百分比,如1vw即浏览器可视窗口宽度的1%,10vw即窗口宽高的10% vh - 视窗高度的百分比,如1vh即浏览器可视窗口高度的1%,10vh即窗口高度的10% vmin - 选择当前 vw 和 vh 中的最小值,最小值被均分为100单位的vmin...

响应式HTML5模板制作教程

响应式HTML5模板制作教程

HTML5目前发展势头良好,已经逐渐得到大部分浏览器不同程度的支持。许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页。与此同时,目前基于响应式的网页设计理念也得到了广泛的认同,开发者在开发基于HTML 5的网页时,如果能创建响应式的页面,则会增色不少,特别是能适配各类移动终端。在本文中,读者将学习到如何创建一个简单的响应式HTML 5模版。本文的读者需要有一点HTML 5的基础知识。 创建良好的HTML 5模版的特征有: 新的特性应该只是基于HTML、CSS、DOM和Javscript ...

用3个步骤实现响应式网页设计

用3个步骤实现响应式网页设计

写在前面的话:随着移动设备的逐渐普及和Web技术的发展,跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢?我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开发和CSS3结合,来进行多种分辨率适配的例子。 文中提到的响应式网页设计(Responsive web design)是一种现代网页设计方法,基于CSS3的媒介查询(Media Query)特性使得网页适应不同设备,即根据设备的分辨率和缩放自动重新布局。 响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计,可以看看我最近发表的响应式站点列表(译者注:可以好好...

响应式web网页设计流程

响应式web网页设计流程

响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境(屏幕尺寸、屏幕定向、系统平台等)以及用户行为(改 变窗口大小等)进行相应的响应和调整。 具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。 无论用户正在使用pc、平板电脑,或者手机,无论是全屏显示还是非全屏的情况,无论屏幕是横向还是竖向,页面都应该能够自动切换分辨 率、图片尺寸及相关脚本功能等,以适应不同设备。 响应式页面的设计流程 第一步:确定需要兼容的设备类型、屏幕尺寸 ...