首先在head头部标签中写下适配属性:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
个人理解适配:
使用CSS媒体查询标签来达到适配的效果 ----------直接码上代码
/*css媒体查询适配*/
/*iphone5/SE*/
@media screen and (min-width: 320px) and (max-width: 568px) {
/*导航栏字体*/
.header-a {
transform: translateX(40%);
margin-left: 8px;
font-size: 15px;
color: black;
}
.item-div {
position: absolute;
width: 100%;
top: 6px;
transform: translateX(3%);
color: white;
}
/*物流通/power-trans*/
.power-trans {
display: inline-block;
position: relative;
transform: translateY(39%);
width: 200px;
}
.power-trans img {
width: 184px;
}
/*字体自动换行样式*/
.power-trans-font-div {
width: 130px;
}
.power-trans-font-div h6 {
color: black;
}
.power-trans-font {
display: inline-block;
position: relative;
transform: translateY(-87%);
margin-left: 194px;
}
.power-trans-font button {
font-size: 10px;
width: 65px;
height: 25px;
background-color: orangered;
}
.power-trans-font button:hover {
color: white;
}
}
/*iphone6/7/8*/
@media screen and (min-width: 375px) and (max-width: 667px) {
.header-a {
margin-left: 20px;
}
.item-div {
top: 20px;
}
.power-trans {
transform: translateY(39%);
}
.power-trans-font {
transform: translateY(-95%);
margin-left: 242px;
}
.power-trans-font h6 {
font-size: 14px;
}
.power-trans img {
width: 218px;
}
}
/*iphone6/7/8plus*/
@media screen and (min-device-width: 414px) and (max-width: 736px) {
.header-a {
margin-left: 30px;
}
.power-trans {
transform: translateY(43%);
}
.power-trans-font{
transform: translateY(-102%);
margin-left: 282px;
}
.power-trans img{
width: 236px;
}
}
/*iPad适配*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
.head-a {
margin-left: 115px;
color: black;
}
.item-div {
top: 60px;
}
.power-trans {
transform: translateY(120%);
}
.power-trans img {
width: 320px;
}
}
首先,使用 @media screen and (手机行型号最小宽度) and (手机型号最大宽度) 读取到手机的型号类型!上贴代码所有样式都是基于iphone5/SE 在切换成其它手机型号时,在对应的适配中改写需要更改的地方样式既可达到适配效果!
---------------------------------------我是下划线--------------------------------------------------
个人感觉:这样写很麻烦!但暂时还没找到更好的方法!网上看来很多资料,说有用js读取屏幕型号来达到适配的(ps:还是需要写不同手机型号类型的css样式),公司需要!暂时先写着 !如果有大佬有更好的意见或者想法 欢迎留言指出不足!指教更好的方法! 每周一条博客!大家加油