什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?

🌙
手机阅读
本文目录结构

响应式设计简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

优点

  • 面对不同分辨率设备灵活性强
  • 能够快捷解决多设备显示适应问题

缺点

兼容各种设备工作量大,效率低下

代码累赘,会出现隐藏无用的元素,加载时间加长

其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

【通过这三个步骤,你一定可以了解响应式设计的基本原理和media query】

第一步. Meta 标签

为了适应屏幕,多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度,并且忽视初始的宽度设置。这段代码写在 <head>里面

<meta name="viewport" content="width=device-width, initial-scale=1.0">

IE8及以下的浏览器不支持media query。你可以使用 media-queries.js 或 respond.js 。这样IE就能支持media query了。

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

第二步. HTML 结构

这个例子里面,有header、content、sidebar和footer等基本的网页布局。

header 有固定的高180px,content 容器的宽是600px,sidebar的宽是300px。

第三步. Media Queries

CSS3 media query 响应式网页设计的关键。它像一个if语句,告诉浏览器如何根据特定的屏幕宽口来加载网页。

如果屏幕窗口小于980px,规则就生效。设置了容器的宽度为百分比的形式而不是像素单位,这样会更加灵活。

如果文档宽度小于 300 像素则修改背景演示(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

更多面试题

如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

面试题
HTML CSS JavaScript
jQuery Vue.js React
算法 HTTP Babel
BootStrap Electron Gulp
Node.js 前端经验相关 前端综合
Webpack 微信小程序 -

这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>