响应式布局学习笔记

最新推荐文章于 2021-10-13 16:10:40 发布

lulubai1992

最新推荐文章于 2021-10-13 16:10:40 发布

阅读量657

点赞数 1

分类专栏：学习笔记文章标签：响应式布局移动互联网响应式设计

本文链接：https://blog.csdn.net/lulubai1992/article/details/39139193

版权

学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

（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；