自适应布局

CoorChice 发布于2019-08-30 10:59 / 1325人阅读

摘要：常见字体单位绝对单位，页面按精确像素展示如不设置，，相对父元素自适应如不设置，，相对根元素自适应和为相对布局，一般在设置这样比较好换算，即布局常见布局流行布局一般来说拿到的是和的设计稿布局写根据和传入的设计稿宽度动态改变布局根元素这样写

常见字体单位

rem

1. px

绝对单位，页面按精确像素展示

2. em

如不设置，1em = 16px，相对父元素自适应

3. rem

如不设置，1em = 16px，相对根元素自适应

em和rem为相对布局，一般在body设置font-size:62.5%; 这样比较好换算，即

1.4em = 14px 

1.4rem = 14px

布局

常见布局

https://www.cnblogs.com/zhuzh...

流行布局

一般来说拿到的是640px和750px的设计稿

1.rem布局

写js根据dpr和传入的设计稿宽度动态改变

2.vw布局

根元素这样写

html {
    font-size: 13.3333333333333vw // 100px
}

原因是

拿到设计稿一般是750px，就是750px = 100vw，那么1px是0.13333333333vw，那么100px就是 13.3333333333333vw了，
当然也可以用js计算，这个比较方便

GPU云服务器云服务器自适应文本自适应文字自适应自适应沉底

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114695.html

margin详解

摘要：二的赋值普通元素的百分比都是相对于容器的宽度计算。绝对定位元素的百分比，绝对定位元素的百分比是相对于第一个定位祖先元素的宽度计算应用宽高自适应矩形传送门之所以会是，是因为垂直方向上发生重叠。一. margin对尺寸的影响 1.可视尺寸 a.适用于没有设定width/height的普通block水平元素float元素、absolute/fixed元素、inline元素、table-ce...

darry 2019-08-29 11:06 评论0 收藏0
微信小程序新单位rpx与自适应布局

摘要：布局上面四个方法，各有优缺点，现在回头看看微信的，相信大家已经有所启发，实际上就是系统级的把页面按比例分割份，，或者伸缩布局的。也就是说，微信小程序的布局帮大家把布局的设置根元素字体尺寸这步省了，或者减少了伸缩布局不能开启的问题。 rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以根据屏幕宽度进行自适应，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信...

LeviDing 2019-08-29 11:27 评论0 收藏0
微信小程序新单位rpx与自适应布局

摘要：布局上面四个方法，各有优缺点，现在回头看看微信的，相信大家已经有所启发，实际上就是系统级的把页面按比例分割份，，或者伸缩布局的。也就是说，微信小程序的布局帮大家把布局的设置根元素字体尺寸这步省了，或者减少了伸缩布局不能开启的问题。 rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以根据屏幕宽度进行自适应，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信...

thursday 2019-08-20 11:42 评论0 收藏0
微信小程序新单位rpx与自适应布局

摘要：布局上面四个方法，各有优缺点，现在回头看看微信的，相信大家已经有所启发，实际上就是系统级的把页面按比例分割份，，或者伸缩布局的。也就是说，微信小程序的布局帮大家把布局的设置根元素字体尺寸这步省了，或者减少了伸缩布局不能开启的问题。 rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以根据屏幕宽度进行自适应，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信...

Java_oldboy 2019-08-01 15:50 评论0 收藏0
css上中下布局自适应中间，左右布局自适应左侧display: table

摘要：在我们经常用到固定头部和底部，自适应中间部分，或者固定左侧，自适应右侧等。在网上看了很多方法，一般都是通过绝对定位完成，具体可以网上去搜，这样可以完成上中下的布局，但是这次基础上再做左右布局浮动会出现问题，具体什么问题我没有深究。在css我们经常用到固定头部和底部，自适应中间部分，或者固定左侧，自适应右侧等。在网上看了很多方法，一般都是通过绝对定位完成，position: absol...

Baaaan 2019-08-30 13:00 评论0 收藏0