-
移动优先设计查看全部
-
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 1、Bootstrap重要特征 一套完整基础的CSS插件 丰富的预定义样式表 一组基于jQuery的JS插件集 崇尚移动(Mobile First)先行，非常灵活的响应式(Responsive)栅格系统 2、Bootstrap官网: www.getbootstrap.com 或 直接在GitHub网站上在线阅读源码，目录分别是js和less ---- http://github.com/twbs/bootstrap 3、HTML标准模板 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 默认情况下，UI布局的宽度和移动设备的宽度一致，缩放大小为原始大小 <!- -bootstrap - -> <link href="css/bootstrap.min.css" rel="stylesheet"> <!- -以下2个插件是用于在IE8支持HTML5元素和媒体查询的，不用可移除- -> <!- - Respond.js不支持file://方式访问- -> <!- -[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/htmlsshiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/reapond.min.js"></script> <![endif]- -> <!- -如果使用Bootstrap的JS插件，则必须引入jQuery- -> <script src="https://code.jquery.com/jquery.js"></script> <!- - Bootstrap的js插件- -> <script src="js/bootstrap.min.js"></script>查看全部
-
bootstrap： 移动优先的前端框架 写非常少的代码即可实现多终端的页面适配查看全部
-
media query的使用例子：查看全部
-
CSS3-Media Query常见的属性：查看全部
-
如何实现响应式布局 1.css3的 media query 推荐使用 2.用原生的js 成本高，不推荐使用 3.第三方开源框架，可以很好的支持浏览器响应式布局的设计，例如bootstrop查看全部
-
响应式设计优缺点查看全部
-
响应式布局属性查看全部
-
bootstrap 移动优先的前端框架 写非常少的代码即可实现多终端的页面适配查看全部
-
CSS3-Media Query常见属性查看全部
-
响应式设计原则查看全部
-
device-width,device-height----屏幕宽高，也就是物理宽高 width,height--渲染窗口宽高，也就是可视宽高 orientation--设备方向 resolution--设备分辨率查看全部
举报
0/150
提交
取消