-
device-width,device-height——屏幕高度 orientation——设备方向 resolution——设备分辨率查看全部
-
<link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)"/>查看全部
-
2775661623查看全部
-
CSS3 Media Query 常见属性:<br><br> device-width，device-height--屏幕宽高（物理上的）<br><br> width，height--渲染窗口宽高（实际窗口宽高）<br><br> orientation 设备方向（横屏竖屏）<br><br> resolution 设备分辨率<br> <link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)"/> 只有当屏幕width小于480px才调用这个外部样式查看全部
-
框架不仅可以帮助解决低端浏览器不支持css3的问题，同时解决了不同分辨率上网页布局的展示， 此处介绍框架：Bottsstrap（getbootstrap.com）——移动优先的前端框架， 最大的好处就是：写非常少的代码，即可实现多终端的页面适配, respond.js是为让IE8支持media query属性, 需要引入respond.js，而response.js必须部署在webserver域名下面，否则会出现跨域问题。 IE9以下浏览器兼容，需要引入respond.js <meta name="viewport" content="width=device-width,initial-scale=1.0"> bootstrap.js依赖jQuery查看全部
-
CSS3 Media Query 常见属性:<br> device-width，device-height--屏幕宽高（物理上的）<br> width，height--渲染窗口宽高（实际窗口宽高）<br> orientation 设备方向（横屏竖屏）<br> resolution 设备分辨率 <link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)"/>查看全部
-
响应式设计原则 1.移动优先：在设计的初期就要考虑的页面如何在多终端展示 2.渐进增强：充分发挥硬件设备的最大功能（比如说低端浏览器）查看全部
-
响应式设计 优点：解决了设备之间的差异化展示 缺点：兼容性代码多，工作量大，加载速度受影响。 对原有网站布局会产生影响，用户判断未必精确。查看全部
-
什么是响应式布局： 1、服务器根据不同的浏览器用户端，为用户呈现不同的页面效果。 2、可以让一个网站兼容不同分辨率的设备，给用户更好的视觉使用体验。 3、移动互联网催生了响应式布局的诞生。 响应式设计优缺点： 优点：解决了设备之间的差异化展示，让不同的设备达到最优的视觉体验。 缺点：兼容性代码多，工作量大，加载速度受影响。 响应式设计的原则： 移动优先： 再设计的初期就要考虑页面如何在多终端展示。 渐进增强： 充分发挥硬件设备的最大功能。 如何实现响应式布局 CSS3-Media Query 最简单的方式 借助原生Javascript 成本高，不推荐使用 第三方开源框架 可以很好的支持浏览器响应式布局的设计 CSS3 - Media Query 常见属性 device-width, device-height 屏幕宽高 width, height 渲染窗口宽高 orientation 设备方向，设置移动设备的横屏或竖屏的展示方式 resolution 设备分辨率 Bootstrap 写非常少的代码，即可实现多终端的页面适配 设置viewport 引入bootstrap 兼容IE Bootstrap CSS和组件介绍 Grid system 栅格系统查看全部
-
http://www.bootcss.com/ Bootstrap中文网查看全部
-
使用bootstrap之前做的准备查看全部
-
col-sx-查看全部
-
实现方法：1、css3-Media Query媒体查询（成本低/易实现）；2、js（高成本/弥补不支持css3媒体查询的不足）；3、第三方框架（成本低/易用/可以很好的支持浏览器响应式的设计）查看全部
-
缺点2：对原有网站布局会产生影响，用户判断未必精准查看全部
-
响应式缺点：兼容性代码多，工作量大，加载速度受影响查看全部
举报
0/150
提交
取消