(重点)Flex布局和两种适配方式(rem及vw/vh) |
您所在的位置：网站首页 › vivo手机网页放大缩小设置 › (重点)Flex布局和两种适配方式(rem及vw/vh) |
(重点)Flex布局和两种适配方式(rem及vw/vh)
|
来到重点-flex布局 首先了解一下移动端的特点 pc端和移动端的不同PC端 屏幕大，网页固定版心 浏览器繁多，更多考虑兼容性问题。（布局： 浮动+定位+标准流）移动端 手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度 移动端则基本不需要考虑兼容性问题，可以放心大胆使用CSS新特性 物理分辨率和逻辑分辨率 物理分辨率：硬件所支持的，屏幕出厂就设定无法修改 逻辑分辨率：软件可以达到的， 我们开发中写的是逻辑分辨率 视口 视口的分类： 布局视口 。 iOS, Android基本都将这个视口分辨率设置为980px。
有了视口标签，可以达到我们想要的理想视口。 width=device-width：视口宽度=设备宽度 initial-scale=1.0：初始页面缩放倍数 maximum-scale=1.0 最大缩放倍数 user-scalable=0 不允许用户缩放页面（移动端） 或者为 no 如果为 yes 则允许用户缩放 百分比布局百分比布局， 也叫流式布局 百分比布局特点:宽度自适应，高度固定。 来到重点flex布局 flex布局flex布局极大的提高了我们布局的效率，更简单、灵活。 display: flex; 一定要给亲爸爸加。 弹性盒子换行特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。 弹性盒子换行显示 :给父元素添加 flex-wrap: wrap; 对齐方式 主轴的对齐方式 属性值作用flex-start默认值, 起点开始依次排列flex-end终点开始依次排列center沿主轴居中排列space-around弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧space-between弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间space-evenly弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等记忆方法： 两侧没缝隙是 between 缝隙一样大是 evenly 2倍缝隙是 around 侧轴对齐方式 属性值作用flex-start起点开始依次排列flex-end终点开始依次排列center沿侧轴居中排列stretch默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器重点记住center ，可以让元素垂直居中。 align-items: center; 设置主轴方向主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方向属性: flex-direction 属性值作用row行, 水平(默认值)column列, 垂直row-reverse行, 从右向左column-reverse列, 从下向上语法： flex-direction：column;修改完毕，主轴是Y轴， 侧轴是X轴。 伸缩比把父盒子分为若干份数，每个子盒子各占几份。 flex:1; 一定给子盒子加 语法： flex: 1;比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1； 此时每个子盒子各占三分之一。 .father { display: flex; height: 300px; background-color: pink; } .father div { /* 每个孩子各占1份 */ flex: 1; /* 默认子盒子和父亲一样高 */ background: purple; }一定要给子盒子添加。 子盒子默认高度会和父盒子一样高。 圣杯布局所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。 一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索
注意：中间flex: 1; 和 width 有冲突。 优先执行 flex：1； 小结在flex眼中，标签不再分类。 简单说就是没有块级元素，行内元素和行内块元素 任何一个元素都可以直接给宽度和高度一行显示Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动 当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex caniuse.com/ 可以查看兼容性 适配方式(rem) (vw/wh) rem remrem 是一个相对单位，1rem 就是 html 文字的大小 比如 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size: 2rem; } rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。则此时 1rem 就是 12px。 媒体查询（了解）媒体查询 media query 可以自动检测视口的宽度。 媒体查询一个非常大的作用是：根据屏幕宽度修改html文字大小。 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 ，就完成了适配 语法： @media (width:375px) { html { font-size: 40px; } } @media (width:320px) { html { font-size: 30px; } }综合： /* 需求： iphone 678 375px html文字大小为 12*/ @media (width:375px) { html { font-size: 12px; /*font-size: 37.5px; */ } } /* 需求： iphone 678 x 414 html文字大小为 16 */ @media (width:414px) { html { font-size: 16px; /* font-size: 41.4px;*/ } } /* 思考一下，如果414屏幕下，一个盒子宽度沾满屏幕，高度和宽度一样大 414*414。 思考一下，如果375屏幕下，一个盒子宽度沾满屏幕，高度和宽度一样大 375 * 375。 html文字大小设置为多少？ */ .box { width: 10rem; height: 10rem; background-color: pink; } /*目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10 */通过媒体查询，检测不同的视口宽度，设定不同的html文字大小，元素设置rem单位后，可以达到元素适配效果 flexible.js媒体查询写起来超级麻烦，而且检测不够精确，因此我们使用 flexible.js 这个 js文件，通过js 实时检测屏幕窗口的变化实现检测视口宽度。 这个也是值得提倡使用的一种方式。 有了这个js文件，可以帮我们自动检测屏幕宽度，自动修改html文字大小，这样就可以让盒子配合rem完成适配。 .box { width: 10rem; height: 10rem; background-color: pink; } .box2 { width: 0.8rem; height: 0.8rem; background-color: skyblue; } 如何把设计稿的px转换为rem问题： flexible 能够修改html文字大小，修改文字大小: 当前屏幕 / 10 就是文字大小 例如： 当前屏幕 375px，则加了 flexible之后，html文字大小为 37.5px 我们的设计稿里面元素大小是固定的吗？ 是 ， 而是 px 单位 ，但是我们开发的时候，要使用 rem 才能适配。 那怎么把我们测量的px 转换为适配的rem呢？ 直接使用测量的px值 / 37.5 就是 rem的值 LESSless 可以帮我们把px单位转换到rem单位。 Less是一个CSS预处理器, Less文件后缀是.less 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。 Less插件:Easy Less(less文件保存自动生成css文件) 小结我们的需求的是要做移动端适配： 页面中的元素尺寸跟随屏幕宽度等比例缩放（适当调整大小） 方案如下： flex + rem + flexiable.js + less 我们移动端采取 flex 布局。 rem单位： 做移动端适配的。 rem相对单位，跟html文字大小有关系媒体查询： 检测屏幕的视口宽度 flexiable.js ：可以根据屏幕的宽度自动修改html文字大小 less: less让我们的css具有了计算能力 less 可以让我们很方便的 把 px 转换为 rem vw vwvw就是视口的宽度，vw 是个相对单位。 不管在什么屏幕下， 我们把屏幕分为平均的 100等份。 1vw = 1 / 100 屏幕的宽度 1vw 和 1% widith: 1vw; width: 1%; vw 和 1% 有没有区别： vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px 百分比以父盒子为准。 假如父盒子是 200px，则 1% 是 2px px 如何转为vw我们设计稿是 iphone 678 是 375px， vw 把屏幕划分了100等份， 则 1vw = 3.75 px 有个盒子啊，我测量了下，他的宽度是 3.75px * 3.75px ，则 写成 vw 是多少？ 1vw * 1vw 又一个盒子，宽度和高度分别是 37.5px 和 37.5px ，则 转换为vw 是多少？ 10vw * 10vw 有一个盒子 68px * 29px ，则我们写代码 less vw ？ width: (68 / 3.75vw); height: (29 / 3.75vw); |
【本文地址】
今日新闻 |
推荐新闻 |