• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 响应式布局是什么?响应式布局的介绍

响应式布局是什么?响应式布局的介绍

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含响应式布局等相关知识,匿名希望在学习及工作中可以帮助到您
响应式布局是什么?现在响应式布局是越来越火,但是响应式布局究竟是什么可能很多的朋友还是不太了解,那么,接下来的这篇文章就给大家来介绍一下什么是响应式布局,有兴趣的朋友可以看一下。

首先我们来看一下响应式布局是什么?

根据百度百科我们可以知道:响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

通俗来说,响应式布局就是做一个网站同时能兼容多个终端,由一个网站转变成多个网站,为我们大大节省了资源。

响应式界面有四个层次:

1、同一页面在不同大小和比例上看起来都应该是舒适的;

2、同一页面在不同分辨率上看起来都应该是合理的;

4、同一页面在不同操作方式(如鼠标和触屏)下,体验应该是统一的;

5、同一页面在不同类型的设备(手机、平板、电脑)上,交互方式应该是符合习惯的。

在知道了响应式布局是什么后,我们再来简单说一说响应式布局的用法

1、布局及设置meta标签

当创建一个响应式网站,或者非响应式网站变成响应式的时候,首先要关注元素的布局;比如,在手机设备上,我们要禁止用户来缩放屏幕。不禁止的话,可能在显示上会造成错位,以及显示的不是手机网站的样式。所以,我们要通过代码来禁止用户在手机端上缩放屏幕,已达到正常的手机网站效果。

2、通过媒体查询来设置样式media query

media query 是响应式设计的核心,它能够和浏览器进行沟通,告诉浏览器页面如何呈现,假如一个终端的分辨率小于980px,那么可以这样写,这个时候的布局会覆盖掉之前设置的布局。

3、设置多种视图宽度

4、响应式的图片

响应式布局的用法在这里就简单介绍一下,对于响应式的深入了解大家可以关注微课江湖的相关栏目进行学习!!!

以上就是响应式布局是什么?响应式布局的介绍的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

相关文章

  • 2018-12-03html5 常用标签汇总详情
  • 2018-12-03html5 css3网站菜单实现代码_html5教程技巧
  • 2018-12-03HTML5中的header标签是什么意思?HTML5中header标签具体使用方法你知道吗?
  • 2018-12-03移动端H5页面实现生成图片的代码
  • 2018-12-03HTML5 Canvas动画设计解析
  • 2017-08-06HTML5+lufylegend实现游戏中的卷轴
  • 2018-12-03html5 web本地存储将取代我们的cookie_html5教程技巧
  • 2018-12-03html5 canvas 微信海报分享
  • 2018-12-03HTML5实战与剖析之焦点管理(activeElement和hasFocus)
  • 2018-12-03Html5中video标签的用法:如何自动填充满父div标签

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5的表单(绝对特别强大的功能)使用示例
    • ECharts-基于HTML5 Canvas的JavaScript图表库图文详解
    • 基于HTML5 Canvas实现视频破碎重组特效
    • Html5中postmessage实现子父窗口传值的代码
    • 生日蛋糕的制作方法-不过用的是HTML5+CSS3代码
    • 微信开发实战之分享功能
    • 浅谈 粒子动画 特效实现实例总结
    • HTML5 video 视频标签使用介绍_html5教程技巧
    • HTML5之SVG 2D入门7—SVG元素的重用与引用
    • 中文乱码问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有