当前位置 : 主页 > 手机开发 > 无线 >

移动端布局

来源:互联网 收集:自由互联 发布时间:2021-06-10
1移动端布局 rem布局+媒体查询+弹性盒 媒体查询; 匹配不同的设备宽度从而加载不同的css样式 注意地下的空格 不要删除,不然不出效果 @media only screen and (min-width:360px){ body{ background:y

1移动端布局
  rem布局+媒体查询+弹性盒
媒体查询;
  匹配不同的设备宽度从而加载不同的css样式 注意地下的空格 不要删除,不然不出效果
@media only screen and (min-width:360px){
  body{
      background:yellow;
}

}
@media screen and (min-width:320px) and (max-width:375px){

body{
background:yellow;
}
}
screen: 代表是屏幕:pc 移动端 平板
all 代表所有设备
orientation:portrait; 竖屏
orientation:landscape; 横屏

断点
375px 最常用
Meta 标签的设置(设配移动端必备标签)
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
width=device-width 设备宽度
initial-scale=1 缩放比例
user-scalable=no 禁止用户缩放


移动端的单位
px ,% ,em, rem
rem : 相对于根元素!的字体大小
默认: 1 rem=16px

如果改根元素的大小,就是改html
html{
font-size:20px;
}
div{
font-size:2rem;

}

 ppi dpi dpr

ppi 每英寸拥有的像素数量
dpr 设备像素比=物理像素(设备显示)/逻辑像素(css设置的)
UI设计师给你的是2倍图, 拿过来之后除以2
200px 200px
img{
width;100px;
height:100px;

}
结论:
3倍图 是 dpr
300px 300px 物理像素
img{
width:100px
height;100px 逻辑像素

}
压缩来配适高清屏 充不满就会失帧

移动端设计图大小集中在;640px 750px ,1080px 根据设计图大小确定dpr 的值
设计图640px 考虑dpr 为2
设计图1080px 考虑dpr 是3

字体大小还是用像素 px


字体图标库 添加图标用i 标签 选择font class
例如: <i class="iconfont icon-shouye">
<span>首页</span>




居中:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 700px;
height: 700px;
border: 1px solid red;
position: relative;


}
.box>img{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);

}
</style>
</head>
<body>
<div class="box">

<img src="../img/1.png"/>

</div>
</body>
</html>

 

1.单位 vw vh (小程序经常用) 就是 viewportwidth vw 视口的宽度 :100vw 是视口的宽度的100% ,viewportheight vh 视口的高度 2.100vw 和100% 是不一样的; 100vw: 包含滚动条,就是会出现滚动条 100% : 3.vmax 视口最大 , vmin 视口最小 4.按照iphone6 的标准行换算 375px=100vw 100px =26.67vw .按照iphone5 进行换算 320px=100vw 100px =31.25vw html{ font-size:26.67vw; } 引入js 来 然后将量的高度向前进俩位 88厘米 就是0.88rem

网友评论