响应式布局介绍
发布时间:2024-05-15 12:43:14 所属栏目:语言 来源:DaWei
导读: 这篇文章给大家分享的是关于响应式布局的内容,本文对响应式布局有详细的介绍,另外还介绍了一些响应式布局容易忽略但又很重要的知识点,对大家理解响应式布局有一定的帮助,感兴趣的朋友接
这篇文章给大家分享的是关于响应式布局的内容,本文对响应式布局有详细的介绍,另外还介绍了一些响应式布局容易忽略但又很重要的知识点,对大家理解响应式布局有一定的帮助,感兴趣的朋友接下来一起跟随小编看看吧。 一、前言 响应式Web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随用户的使用环境(屏幕大小、输入方式、设备/浏览器能力)而变化。 二、视口 移动前端中常说的 viewport (视口)就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小,特别是可以缩放浏览器窗口的情况下。手机端与PC端视口存在差异,电脑端的视口宽度等于分辨率,而移动端的视口宽度跟分辨率没有关系,宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。 1.为什么手机端视口要设为980px? 当年乔布斯设想:苹果手机如果在市场上火爆了,但是各个网站还没有来得及制作手机端网页,那么用户不得不用手机访问电脑版的网页,如何用小屏幕访问大屏幕的页面也同样可读呢?乔帮主就想着为手机固定一个视口宽度,让手机的视口宽度等于世界上绝大多数PC网页的版心宽度,就是980px。这样,用手机访问电脑版网页的时候,旁边刚好没有留白。不过页面缩放后文字会变得非常小,用户需要手动放大缩小才能看清楚,体验非常差。 2.约束视口 为了解决前面的问题,可以在网页的中添加下面这行代码: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> width=device-width 视口为设备宽度(就是人设置的一个宽度)//不设置的话默认为980px initial-scale=1.0 初始化的视口大小是1.0倍 maximum-scale=1.0 最大的倍数是1.0倍 user-scalable=0 不允许缩放视口 这个视口的标签告诉浏览器怎么渲染网页。在这里,标签想表达的意思是:按照设备的宽度(device-width)来渲染网页内容。事实上,在支持这个标签的设备上给你看一看效果,你就明白了。 三、手机浏览器内核 在移动端,仅有四个独立的浏览器内核,分别为微软的Trident、火狐的Gecko、开源内核Webkit、Opera的Presto。 目前微软的Trident在移动终端上主要为WP7、8系统内置浏览器。Opera的Presto内核主要为 Opera Mobile、OperaMini、欧朋浏览器以及欧朋HD Beta版。Webkit内核的适用范围则较为广泛,Android原生浏览器、苹果的Safari、谷歌Chrome(Android4.0使用)都是基于Webkit开源内核开发的。 四、流式布局 百分比布局也叫作流式布局、弹性盒布局。手机网页没有版心,都左右撑满。 百分比能够设置的属性是width、height、padding、margin。其他属性比如border、font-size不能用百分比设置的。 如果用百分比写width,那么指的是父元素width的百分之多少。 如果用百分比写height,那么指的是父元素height的百分之多少。 如果用百分比写padding,那么指的是父元素width的百分之多少,无论是水平的padding还是竖直的padding。 如果用百分比写margin,那么指的是父元素width的百分之多少,无论是水平的margin还是竖直的margin。 不能用百分比写border的宽度 接下来我们看一个例子: div{ width:200px; height:300px; padding:10px; } div p{ width:50%; height:50%; padding:10%; } 此时p的真实宽度是多少? 此时p的真实宽度是140px*190px 关于响应式布局的内容就介绍到这,现在大家对于响应式布局应该都清楚了吧,上述提到的这些大家在应用响应式布局时一定的要注意。 (编辑:开发网_开封站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐