阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的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前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

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

      目录
      目录