响应式布局学习笔记

来源：互联网发布：粒子群算法详解和实例编辑：程序博客网时间：2024/05/17 18:13

一、什么是响应式布局（移动互联网的多终端显示）

（1）让一个网站可兼容不同分辨率的设备

（2）给用户更好的视觉使用体验

优点：解决了设备只见的差异化展示

缺点：兼容性代码多，工作量大，加载速度容易受影响

对原有网站布局会产生影响，用户判断未必精确

二、响应式设计原则

移动优先（设计初期就考虑页面如何在多终端展示）

渐进增强（充分发挥硬件设备的最大功能）

三、实现响应式布局

（一）方法

1、CSS3-Media Query//根据不同纬度，用户窗口大小，给用户做不同UI界面展示

2、原生javascript //在旧版浏览器不支持效果时，但不推荐使用，成本高

3、第三方开源框架//可以很好的支持浏览器响应式布局，如bootstrap

（二）CSS3-Media Query

常见属性：

device-width，device-height 屏幕宽高（设备物理宽高）//像素

width，height 渲染窗口宽高（浏览器可视区域）

orientation 设备方向//即手机横竖屏展示

resolution 设备分辨率

（三）Bootstrap——高度组件化，不要尝试重新开发

核心：栅格化布局，需着重掌握

用法：

<!DOCTYPE html><html lang="zh-cn">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Bootstrap</title>    <!-- Bootstrap -->    <link href="css/bootstrap.min.css" rel="stylesheet">    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->    <!-- 如果ie9不支持则引入该js文件 -->    <!--[if lt IE 9]>      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    <![endif]-->  </head>  <body>    <h1>Hello World!</h1>  </body></html>

initial-scale=1 //指的是默认不缩放，缩放比例1；

0 0