自适应问题

列举常用的pc屏幕宽度：

1024  1280  1366  1440  1680  1920 

1、css样式

@media screen and(min-width: 1024px){ body{font-size: 12px} } /*>=1024的设备屏幕*/ @media screen and(min-width: 1100px) { body{font-size: 14px} } /*>=1100的设备屏幕*/ @media (min-width: 1280px) { body{font-size: 18px;} } /*>=1280的设备屏幕*/ @media screen and(min-width: 1366px) { body{font-size: 20px;} } /*>=1366的设备屏幕*/ @media screen and(min-width: 1440px) { body{font-size: 24px !important;} } /*>=1440的设备屏幕*/ @media screen and(min-width: 1680px) { body{font-size: 26px;} } /*>=1680的设备屏幕*/ @media screen and(min-width: 1920px) { body{font-size: 30px;} } /*>=1920的设备屏幕*/

2、样式引入

<link rel="stylesheet" media="(min-width:1024px) and (max-width:1366px)" href="mediaStyle.css" />

3、ie8兼容

对 ie低版本情况下不支持css3，这就是让前端头疼的事，但是不用急，有办法；

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries --> <!--[if lte IE 8]> <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]-->

html5.min.js：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。

respond.min.js：让IE6-IE8等其他浏览器支持媒体查询

移动端媒体查询适配：

加上：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=1.0：表示最小的缩放比例

maximum-scale=1.0：表示最大的缩放比例

user-scalable=no：表示用户是否可以调整缩放比例

/*iphone4*/ @media only screen and (max-width: 320px) and (max-width: 480px) { html,body{ font-size: 12px; } } /*iphone5*/ @media only screen and (max-width: 320px) and (min-height: 568px) { html,body{ font-size: 14px; } } /*ihpne6,7,8*/ @media only screen and (min-width: 375px) and (max-width: 413px) { html,body{ font-size: 16px; } } /*ihpne6,7,8Plus*/ @media only screen and (min-width: 414px) and (max-width: 640px) { html,body{ font-size: 18px; } }

即容器不定死宽高，而是随内容和随浏览器可视区大小自适应宽高。常用方法是 min-width、max-width 或 百分比宽度 或vw vh

css3中弹性盒子布局

任何一个容器都可以指定为Flex布局。

.box{ display: flex; }

行内元素也可以使用Flex布局。

.box{ display: inline-flex; }

Webkit内核的浏览器，必须加上-webkit前缀。

.box{ display: -webkit-flex; /* Safari */ display: flex; }

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

3.1 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box { flex-direction: row | row-reverse | column | column-reverse; }

row（默认值）：主轴为水平方向，起点在左端。x

row-reverse：主轴为水平方向，起点在右端。x

column：主轴为垂直方向，起点在上沿。y

column-reverse：主轴为垂直方向，起点在下沿。y

3.2 flex-wrap属性

.box{ flex-wrap: nowrap | wrap | wrap-reverse; } 不换行/换行/第一行在下方

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box { flex-flow: <flex-direction> || <flex-wrap>; }

3.4 justify-content属性

.box { justify-content: flex-start | flex-end | center | space-between | space-around; }

3.5 align-items属性

.box { align-items: flex-start | flex-end | center | baseline | stretch; }

3.6 align-content属性

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

可参考  https://blog.csdn.net/lm9948/article/details/80732702