rem是什么?l rem是一种新的单位,是一个相对单位,类似于em。 不同的是rem的基准是相当于html元素的字体大小
rem的优势? 由于rem是基于html的字体大小,所以我们在不同屏幕大小的时候只需要设置html的font-size即可实现整体控制,以实现页适配
媒体查询 争对不同的屏幕尺寸设置不同的样式
@media mediatype and|not|only (media feature){
css..
}
例:
/*屏幕宽度小于等于800px的样式*/
@media screen and (max-width:800px){
css...
}
媒体查询引入资源
<link href="320.css" media="screen adn (min-width:320px)">
<link href="640.css" media="screen adn (min-width:640px)">
当屏幕大于320px的时候引入320.css当屏幕尺寸大于640px的时候引入的是640css
一、
二、
动态设置html标签font-size的大小 案例
2.假如我们把整个屏幕划分为15等份(10/20都可以) 3.那么每一份的大小作为html的字体大小如这里就是50px 4.那么在320px设备的时候,字体大小为320/15就是 21.33px 5.用我们页面元素的大小除以不同的html字体大小就会发现他们的比例还是相同的 6.比如我们以750标准设计稿 7.一个100100元素在750屏幕下,就是100/50,转换为rem就是2rem2rem 比例是1:1 8.在320屏幕下 html的字体大小为21.33则2rem=42.66px此时宽高都是42.66他们的比例还是1:1 9.但是已经实现了不同屏幕下页面元素盒子的比例缩放效果。
元素大小取值方法
rem配合 flexible.js 使用第一种方式有点麻烦 如下代码 很多媒体查询
/* 设置常见屏幕尺寸,修改html文字大小*/
//320
/*划分份数为15*/
@num:15;
/*限定html大小 (pc打开直接50px)*/
html{
font-size: 50px;
}
@media screen and (min-width:320px){
html{
font-size: 320px / @num;
}
}
//360
@media screen and (min-width:360px){
html{
font-size: 360px / @num;
}
}
/*375*/
@media screen and (min-width:375px){
html{
font-size: 375px/@num;
}
}
/*384*/
@media screen and (min-width:384px){
html{
font-size: 384px/@num;
}
}
/*400*/
@media screen and (min-width:400px){
html{
font-size: 400px/@num;
}
}
/*414*/
@media screen and (min-width:414px){
html{
font-size: 414px/@num;
}
}
/*424*/
@media screen and (min-width:424px){
html{
font-size: 424px/@num;
}
}
/*480*/
@media screen and (min-width:480px){
html{
font-size: 480px/@num;
}
}
/*540*/
@media screen and (min-width:540px){
html{
font-size: 540px/@num;
}
}
/*720*/
@media screen and (min-width:720px){
html{
font-size: 720px/@num;
}
}
/*750*/
@media screen and (min-width:750px){
html{
font-size: 750px/@num;
}
}
很多计算
.search-content{
position: fixed;
left:50%;
top:0;
transform: translateX(-50%);/*移动自己宽度的一半*/
width: 15rem;
height: 88rem / @baseFont;
background-color: #ffc001;
display: flex;
.class{
width: 44rem / @baseFont;
height: 70rem /@baseFont;
margin: 11rem /@baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
background-color: seagreen;
}
.search{
flex:1;
background-color: sandybrown;
}
.login{
width: 75rem / @baseFont;
height: 70rem / @baseFont;
background-color: rosybrown;
margin:10rem / @baseFont
}
}
每次设计到高宽都要除下font-size
解决办法是通过flexible.js github 它是手机淘宝团队出的简洁高效移动端适配库 我们不需要在写不同屏幕的媒体查询,因为js做了相关处理 它的原理是把当前设备划分为10等份,但是在不同设备下比例一致 我们要做的就是确定好我们当前设备的html文字大小就可以了 比如当前设计稿750px,那么我们只需要把html文字大小设置为75px(750px/10)就可以 里面页面元素rem值:页面元素的px值 / 75 剩下的交给flexible.js 如下
html{
font-size: 20px!important;
}
body{
min-width: 320px;
max-width: 750px ;
/*750划分10份每一份 75px 750/75=10=最大宽度*/
width: 10rem; /*750/*/
margin: 0 auto;
line-height: 1.5;
background-color: #f2f2f2;
}
但是我们还是要手动计算元素的rem值,也就是元素的像素除以html的font-size 750设计稿被分成10分那么html的font-size = 75px 也就是我们每个元素的高宽都要除下75 ,还是有点麻烦,之前我们用less还可以实现自动计算,现在确要我们手动计算了 不急如果你使用vscode那么只需要一个插件就能解决,这个插件能自动帮我们将px转换为rem
如下
搜索cssrem,箭头的方向就是我们html的font-size大小
最后将vscode重启即可
到这里还没有完,我们要在css定义一个最大的宽度,当屏幕宽度超过设计稿时,就使用设计稿的宽度 如下
@media screen and (min-width:750px){
html{
font-size: 75px!important;
}
}
如果不添加这个代码在电脑上看上去会非常的大,显示不好看,因为我们只做了移动端的布局
到这里我们就可以直接按照设计稿进行编码了,并且实现自动适应
最后感谢pink老师 https://www.ixigua.com/home/1490567706713357/pseries/?preActiveKey=hotsoon