分类目录 共计收录4274站; 资讯文章4395篇; 待审网站 637站; 当月收录0站; 今日审核0站; 已收到1个打赏!
快审详情
快审qq
首页 > 教程收藏 > CSS教程

html5+css3 三步让网站变成相应式设计

html5和css3已是大势所趋, 特别是手机等移动终端的流行, html5+css3的优势越来越明显, 对于前端设计师,学好用html5、css3做响应式网站是势在必行。FqI网站目录

响应式网页设计这个术语,由伊桑马克特提出,他在Alist Apart 发表了一篇开创性的文章,将三种已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来,并命名为响应式网页布局。还有一些其他叫法,如流式 设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。FqI网站目录

《响应式Web设计:HTML5和CSS3实战》  FqI网站目录

三步让网站变成响应式设计

ios和Android浏览器都基于Webkit核心。这两种浏览器以及很多其他浏览器如chrome、opera,都支持用viewport meta元素覆盖默认的画布缩放设置,只需要在html的标签中插入一个标 签。标签中可以设置具体的宽度或者缩放比例。示例:FqI网站目录

  1. FqI网站目录

分析:width=device-width告诉浏览器页面的宽度应该等于设备宽度;initial-scale=2页面的缩放比例,设置比例为设 备尺寸的2倍;maximum-scale=3,允许用户将页面最多放大至设备宽度的3倍;user-scalable=no禁止用户缩放。缩放是一个重 要的辅助功能,所以实践中很少禁用。FqI网站目录

一:粘贴如下代码到和之间:

  1. FqI网站目录

设置比例为1.0这表示浏览器将按照其视口的实际大小来渲染页面FqI网站目录

二:根据显示器不同分辨率改变网页宽度

设置viewport meta 标签后,现在我们针对不同视口修正设计效果,创建CSS样式表,并在页面中调用:FqI网站目录

常见媒体查询FqI网站目录

  1. /* 平板电脑布局: 481px 至 768px。样式继承自: 移动设备布局。 */FqI网站目录

  2. @media only screen and (min-width: 481px) {FqI网站目录

  3. .class{FqI网站目录

  4. <span class="Apple-tab-span" white-space:pre;"=""> background: #333;FqI网站目录

  5. }FqI网站目录

  6. }FqI网站目录

  7. /* 桌面电脑布局: 769px 至最高 1232px。样式继承自: 移动设备布局和平板电脑布局。 */FqI网站目录

  8. @media only screen and (min-width: 769px) {FqI网站目录

  9.  .class {FqI网站目录

  10.     background: #666;FqI网站目录

  11.   }FqI网站目录

  12. }FqI网站目录

三:字体、弹性图片、视频相应式宽度适配

对于响应式网站来说应该有响应式的字体,一个响应式的字体大小应关联它的父容器的宽度,这样它才可以适应客户端的屏幕。FqI网站目录

CSS3 规范引入了一个新的单位叫 rem,和 em 类相似,但相对于 HTML 元素来说, rem 更易于使用。FqI网站目录

rem 是相对于 HTML 元素的,不要忘了重置 HTML 的字体大小:FqI网站目录

  1. html { font-size:100%; }FqI网站目录

完成后,您可以定义响应式的字体大小,如下所示:FqI网站目录

  1. @media (min-width: 640px) { body {font-size:1rem;} } FqI网站目录

  2. @media (min-width:960px) { body {font-size:1.2rem;} } FqI网站目录

  3. @media (min-width:1100px) { body {font-size:1.5rem;} }FqI网站目录

请注意,旧浏览器不支持 rem 单元,所以不要忘了实现一个替代。FqI网站目录

相应式缩放图片

为图片设置max-width:100%和height:auto,来实现其弹性化, 当图片宽度大于当前屏幕自动缩小。对于IE,仍然需要一点额外的工作:FqI网站目录

  1. img {FqI网站目录

  2.     max-width: 100%;FqI网站目录

  3.     height: auto;FqI网站目录

  4.     width: auto9; /* ie8 */FqI网站目录

  5. }FqI网站目录

相应式缩放内嵌视频

视频也需要max-width:100%设置;但是Safari对embed的属性支持不是很给力,所以我们以width: 100%来代替:FqI网站目录

  1. .video embed,FqI网站目录

  2. .video object,FqI网站目录

  3. .video iframe {FqI网站目录

  4.     width: 100%;FqI网站目录

  5.     height: auto;FqI网站目录

  6. }FqI网站目录


FqI网站目录

此文由 网站目录 编辑,未经允许不得转载!:

评论 暂无评论
-->