为了账号安全,请及时绑定邮箱和手机立即绑定
  • 如何实现响应式布局 1、CSS3-Media Query 最简单的方式 2、借助原生JavaScript 成本高,不推荐使用 3、第三方开源框架 bootstrap
    查看全部
  • 优缺点
    查看全部
  • CSS3 Media Quary常见属性 device-width,device-height ——设备宽高 width, height ——渲染窗口宽高 orientation——设备方向 resolution——设备分辨率
    查看全部
  • CSS3-Media Query
    查看全部
  • CSS3 Media Quary常见属性 device-width,device-height ——设备宽高 width, height ——渲染窗口宽高 orientation——设备方向 resolution——设备分辨率
    查看全部
  • 大大鞍山打算阿斯达啊实打实大声道阿斯达鞍山鞍山
    查看全部
    0 采集 收起 来源:基本背景介绍

    2017-04-12

  • 响应式布局之bootstrap框架: 1、是一种移动优先的前端框架; 2、优点:写非常少的代码,即可实现多终端的页面适配; 3、源文件主要有两部分构成,即CSS,JS和font字体; 4、bootstrap的源代码是一些Less文件,不改变源代码的情况下可以直接下载编译后的文件;
    查看全部
  • 框架不仅可以帮助解决低端浏览器不支持css3的问题,同时解决了不同分辨率上网页布局的展示, 此处介绍框架:Bottsstrap(getbootstrap.com)——移动优先的前端框架, 最大的好处就是:写非常少的代码,即可实现多终端的页面适配, respond.js是为让IE8支持media query属性, respond.js必须部署在webserver域名下面. IE9以下浏览器兼容,需要音容respond.js <meta name="viewport" content="width=device-width,initial-scale=1.0"> bootstrap.js依赖jQuery
    查看全部
  • CSS3-Media Query 1.常见属性: device-width,device-height-----屏幕宽高(物理) width,height -----渲染窗口宽高(浏览器) orientation -----设备方向(横屏、竖屏) resolution -----设备分辨率 2.基本的语法 外联、内嵌。 001.外联 <link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)"/> 当屏幕的宽度小于等于480px时,使用这个css 002.内嵌 <style> $media screen and (min-width:480px){ body{background:blue;} } </style> 当屏幕的宽度大于480px时,使用这个css
    查看全部
  • 实现响应式布局的三种方式 1、CSS3 - Media Query(推荐使用,不能满足传统的pc端访问网站的需求,但能满足大多数的需求) 2、原生的Javascript (成本高,不推荐使用) 3、第三方开源框架 (推荐使用,可以很好的支持浏览器响应式布局的设计)
    查看全部
  • 移动优先: 在设计的初期就要考虑到页面如何在多个终端显示 渐进增强: 充分发挥硬件设备的最大功能 不要因为低端浏览器(IE6\7\8等)不支持某些属性和功能,就不使用某些属性和功能
    查看全部
  • 响应式设计优缺点
    查看全部
  • Bootstrap的栅格系统就是响应式布局的代表! 响应式布局的目的: 对于不同的设备,给出最佳的展示方案。
    查看全部
  • 响应式布局 What: 1、兼容不同分辨率的设备 2、给用户更好的视觉使用体验 Why: 移动互联网的催生,非响应式网页布局无法满足移动互联网的多个终端显示的需求
    查看全部
    0 采集 收起 来源:基本背景介绍

    2017-04-08

  • 栅格类需在 div.row 中
    查看全部

举报

0/150
提交
取消
课程须知
小伙伴,在学习本课程之前,需要你熟悉HTML、CSS3和JavaScript。
老师告诉你能学到什么?
1、了解什么是响应式布局。 2、理解响应式布局的优缺点、设计原则和实现方法。 3、掌握使用Bootstrap前端框架实现响应式布局。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!