-
css3 - Media Query
常见的属性：
device-width，device-height -- 屏幕宽高
width，height -- 渲染窗口宽高
orientation -- 设备方向
resolution -- 设备分辨率
查看全部 -
分辨率改变css的样式
查看全部 -
1
查看全部 -
来咯ljlebl查看全部
-
移动互联网的多终端显示
查看全部 -
响应式设计
查看全部 -
CSS3-Media Query:
device-width, device-height 屏幕宽高
width, height: 渲染窗口宽高
orientation 设备方向
resolution 设备分辨率
查看全部 -
三种方式实现响应式:js原生，css3media query，bootstrap等框架查看全部
-
响应式设计的原则
移动优先：
1：在设计的初期就要考虑的页面如何在多终端展示
渐进增强
1：充分发挥硬件设备的最大功能
查看全部 -
响应式布局的优点和缺点
优点：
1：解决了设备只见的差异化展示
缺点：
1：兼容性代码多，工作量大，加载速度受影响。
2：对原有网站对布局会产生影响，用户判断未必准确
查看全部 -
响应式设计
1：让一个网站可兼容不同分辨率的设备
2：给用户更好的视觉使用体验
查看全部 -
css3-Media Query
常见的属性：
device-width,device-height---屏幕宽高
width,height---渲染窗口宽高
orientation---设备方向
resolution----设备分辨率
查看全部 -
bootstrap是移动优先框架，要求写<meta name="viewport" content="width=device-width,initial-scale=1.0">
引用bootstrap <link href="css/bootstrap.min.css" rel="stylesheet">
IE8、IE9需要引入respond.js:
查看全部 -
Bootstrap框架可以解决低端浏览器不支持css3属性的问题，还能解决不同的分辨率设备上网页的布局展示
Bootstrap:1.移动优先的简单框架 2.好处是写非常少的代码即可实现多终端的页面适配
类似IE8这种古老的浏览器，不支持media query, 需要引入Respond.js 去激活media query,Respond.js必须部署在websever域名下，不能在静态资源域名,存在跨域
查看全部 -
@media screen and (min-width:480px){
body{background:blue;}
}
当屏幕大于480 背景变成蓝色
查看全部 -
<link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)">外链引入
当屏幕小于480的时候才能引用
查看全部 -
如何实现响应式布局
CSS3-Media Query(最简单的方式)
借助原生Javascript(成本高，不推荐使用)
第三方开源框架（可以很好的支持浏览器响应式布局的设计）
查看全部 -
响应式设计的原则
移动优先：在设计的初期就要考虑的页面如何在多终端展示
渐进增强:充分发挥硬件设备的最大功能（IE6、IE7、IE8等低端浏览器不支持CSS3的属性，需要用javascript方法hack完善交互，但在高端浏览器和支持css3属性的浏览器 充分发挥硬件设备的功能，给用户带来更完美的体验）
查看全部 -
一、响应式设计优
1》 优点：解决了设备只见的差异化展示
2》 缺点：兼容性代码多，工作量大，加载速度受影响
对原有网站布局会产生影响，用户判断未必精确
查看全部 -
一、什么是响应式设计：1.让一个网站可兼容不同分辨率的设备 2.给用户更好的视觉使用体验
二.移动互联网催生了响应式布局的诞生
查看全部 -
该套课程有提炼，有介绍思想，主要收获： 媒体查询； 删格化布局； 组件。查看全部
举报