页面自适应的实现方法

页面自适应自适应是指页面内容自动适应屏幕大小。实现自适应的方式有很多种：1.简单场景下实现自适应：浮动，页面居中，元素宽度不固定，设置百分比自动匹配大小。这样当页面宽度发生变化时，可以利用上面的特性实现简单的自适应效果。2、如果在实际开发中有复杂场景的需求，一般通过编写多套CSS代码，然后利用媒体查询技术，让页面根据不同的屏幕尺寸加载不同的代码模块，达到适配不同的目的屏幕。这种方法需要写多套代码。虽然工作量大，但是对于不同屏幕尺寸的设备，有一套独立的CSS代码，维护起来比较方便。3、响应式布局响应式布局是指根据不同的屏幕尺寸自动调整页面显示效果，实现自适应（也用到了媒体查询技术）。响应式布局一般有网格系统布局和弹性布局。引导框架的核心是网格系统。（后面会详细介绍网格系统的实现）。CSS3mediaqueries媒体查询可以针对不同的设备场景使用不同的css。通常，网格系统和多组代码逻辑匹配页面必须使用媒体查询来确定页面大小。媒体查询技术原理：通过匹配不同屏幕设备的特性，使具有不同特性的CSS代码生效。常用匹配特征媒体特征width/height：浏览器宽高max-width：表示小于最大宽度时生效min-width：表示大于最小宽度时生效device-width/device-height:设备屏幕分辨率widthandheightresolution:设备分辨率rateorientation:portrait（垂直），当高度大于等于宽度时，landscape（水平），当高度小于宽度时Feature匹配运算符当媒体类型匹配且表达式为真时，相应的样式将起作用：1.and@media(min-width:700px)and(orientation:landscape){...}表示最小宽度限制为700px，CSS代码在浏览器宽度大于等于700px且为水平时生效2.逗号分隔@media(max-width:500px),handheldand(orientation:landscape){...}表示最大宽度限制为500px，当浏览器宽度小于等于500px或手持设备为水平时生效Mediaqueryimport链接导入方法@mediaimport@mediascreenand(max-width:990px??){.container{背景：橙色;}}Flex布局传统的布局方式：浮动+position定位+显示属性可以轻松满足简单的布局需求，但是不容易实现绝对居中的常见场景，同时浮动布局也有一些副作用.采用Flex弹性布局，为盒子模型提供最大的灵活性，可以简单、完整、响应式地实现各种页面布局。目前，所有浏览器都支持它。flex的基本概念：1、任何容器元素都可以指定为flex容器块级元素：display:flex内联元素也可以使用flex布局：display:inline-flex；2、使用Flex布局的元素称为Flex容器（flexcontainer），简称“容器”。它的所有子元素都会自动成为称为弹性项目或简称为“项目”的容器的成员。容器中有两个轴，水平主轴和垂直交叉轴。主轴的起始位置（与边框的交点）称为mainstart，结束位置称为mainend；交叉轴的起始位置称为crossstart，结束位置称为crossend。默认情况下，项目沿主轴排列。单个item占用的主轴空间称为mainsize，单个item占用的横轴空间称为crosssize。3.flex容器container的6个属性flex-directiondirectionrow（行排列默认）/row-reverse/column（垂直）/column-reverseflex-direction：当row为主轴时为X方向/当column为主轴为Y方向flex-wrapWrapnewlinenowrap(默认不wrap)/wrap/flex-flow上面两个属性的简写flex-flow:rowwrap以上两个属性可以写成一行justify-content主轴对齐方式：*space-between（多余的空间放在中间）space-around（两边多余的空间）flex-start（item元素靠近主轴起点）flex-end（itemelementclosetotheendofmainaxis)center(itemelementcentered)*align-itemscrossaxisalignment*stretch(默认值，前提是item元素的宽/高不确定)，width/heightofallelements填满整个容器flex-start（item元素靠近横轴起点）flex-end（item元素靠近横轴终点）center（item元素居中）baseline(item元素第一行文本的基线对齐方式)*align-content多轴在交叉轴方向的对齐方式(多行/多列)，为什么不是主轴，因为线已经包裹，它是多行。flex-start项目靠近横轴的起点。flex-end项目元素靠近交叉轴的终点。中心项元素靠近交叉轴的中心点。space-betweenitem元素与交叉轴的两端对齐。space-arounditem元素在每个轴的两侧等距分布。它们之间的间隔是轴和边界之间间隔的两倍。stretch(默认值)item元素占据整个横轴flexitem的6个属性orderitemelementorderflex-grow有多余空间的item元素分配比例，默认为0即不放大flex-shrink。当空间不够时，item元素的收缩率默认为1，即翻倍。flex-basis指定item元素在分配多余空间之前占据主轴尺寸。以上三个属性的简写，注意顺序align-self指定单个item元素自身的对齐方式，可以覆盖align-item属性，默认auto继承align-item*flex-startflex-的属性endcenterbaselinestretch*网格系统网格系统是一种自适应页面布局方法，用于通过行（rows）和列（columns）的一系列组合来创建页面布局。实际要显示的内容可以放在这些创建的网格中。当页面宽度发生变化时，每个网格的大小都会自动调整以适合页面大小。网格系统的实现原理：1、将页面中的每一行布局分成12等份，每等份为一个网格。1格占1/12，2格占2/12，以此类推。页面上的所有网格都被父容器container包裹起来，所有的网格都设置为浮动或者设置为保持一行中的元素在一行中，当一行无法排列时自动换行。所有网格都设置为边界框。2.定义不同屏幕尺寸时grid的不同css类名，例如：使用默认屏幕尺寸：grid-df-1,grid-df-2screensmallsize使用：grid-sm-1,grid-sm-2screen中尺寸使用：grid-md-1,grid-md-2屏幕大尺寸使用：grid-lg-1,grid-lg23。使用mediaquery@mediascreenand(min-width:768px){......}限制容器在不同浏览器宽度（即不同屏幕尺寸）下的固定宽度。当同时设置不同的屏幕尺寸时，网格对应的CSS宽度比例。4.设置每个格子在不同屏幕尺寸下需要占用的格子数。这时候mediaqueries会在屏幕尺寸不同的情况下让各个grid显示合适的比例。例如，