-
333查看全部
-
111查看全部
-
点击toggle这个最惊艳的效果要用js才能做查看全部
-
<meta name="viewport" content="width=device-width,initial-scale=1.0">查看全部
-
头部HEAD要加入的查看全部
-
框架不仅可以帮助解决低端浏览器不支持css3的问题，同时解决了不同分辨率上网页布局的展示，此处介绍框架：Bottsstrap（getbootstrap.com）——移动优先的前端框架，最大的好处就是：写非常少的代码，即可实现多终端的页面适配, respond.js是为让IE8支持media query属性, respond.js必须部署在webserver域名下面.查看全部
-
CSS3-Media Query媒体查询 ·devic-width，device-height——屏幕宽高 ·width,height——渲染窗口宽高 ·orientation——设备方向 ·resolutions——设备分辨率（注意区别像素PX和分辨率DPI的概念区别） 外联样式使用CSS3-Media Query： <link rel="stylesheet" type="text/css" href="link.css" media="only screen and (max-width:480px)"/> 内嵌样式使用CSS3-Media Query: <style type="text/css"> @media screen and (min-width: 480px){ body{ background-color: blue; } } </style>查看全部
-
引入下载下来的bootstrap.min.css,和if语句中的respond.min.js。 bootstrap.min.js中包含一些关于事件的功能，它依赖于jquery。查看全部
-
利用bootstrap的响应式布局，需要加这样一个meta。查看全部
-
兼容ie8查看全部
-
响应式布局 －－ css3 media query常见属性查看全部
-
CSS3-Media Query 常见属性： device-width,device-height——屏幕宽高（实际窗口大小） width，height——渲染窗口宽高（即可视区域） orientation——设备方向 resolution——设备分辨率（注意区别像素PX和分辨率DPI的概念区别）查看全部
-
实现响应式布局的方法： 1.CSS3-Media Query——最简单的方式 2.借助原生JavaScript——成本高，不推荐使用 3.第三方开源框架——可以很好地支持浏览器响应式布局的设计查看全部
-
IE8需要引入Respond.js文件支持Media Query，具体【注意事项】见视频内容 respond.js 最好是与 web程序放在同一域名下，以避免跨域问题查看全部
-
CSS3-Media Query媒体查询 ·devic-width，device-height——屏幕宽高 ·width,height——渲染窗口宽高 ·orientation——设备方向 ·resolutions——设备分辨率（注意区别像素PX和分辨率DPI的概念区别） 外联样式使用CSS3-Media Query： <link rel="stylesheet" type="text/css" href="link.css" media="only screen and (max-width:480px)"/> 当屏幕的分辨率小于480px的时候再使用link.css。 内嵌样式使用CSS3-Media Query: <style type="text/css"> //当最小宽度大于480 的时候使用这个样式。 @media screen and (min-width: 480px){ body{ background-color: blue; } } </style>查看全部
举报
0/150
提交
取消