html5实现移动端效果时,怎么做好用户体验
展开全部
最重要的点:需要控制不同尺寸的设备显示的效果
其次考虑移动端的兼容性以及显示的内容从简为主
不同的尺寸主要是在不同尺寸下有不同的样式: 不同的尺寸一般移动端这样控制
@media screen and (max-width: 319px){
.show-menu{
width: 40px;
height: 40px;
left: 2%;
top: 50%;
}
}
@media screen and (min-width: 320px) and (max-width: 359px){
.show-menu{
width: 40px;
height: 40px;
left: 2%;
top: 50%;
}
}
@media screen and (min-width: 410px) and (max-width: 479px){
.show-menu{
width: 44px;
height: 44px;
left: 2%;
top: 50%;
}
}
@media screen and (min-width: 480px) and (max-width: 639px){
.show-menu{
width: 50px;
height: 44px;
left: 2%;
top: 50%;
}}
@media screen and (min-width: 640px){
.show-menu{
width: 55px;
height: 44px;
left: 2%;
top: 50%;
}}
其次考虑移动端的兼容性以及显示的内容从简为主
不同的尺寸主要是在不同尺寸下有不同的样式: 不同的尺寸一般移动端这样控制
@media screen and (max-width: 319px){
.show-menu{
width: 40px;
height: 40px;
left: 2%;
top: 50%;
}
}
@media screen and (min-width: 320px) and (max-width: 359px){
.show-menu{
width: 40px;
height: 40px;
left: 2%;
top: 50%;
}
}
@media screen and (min-width: 410px) and (max-width: 479px){
.show-menu{
width: 44px;
height: 44px;
left: 2%;
top: 50%;
}
}
@media screen and (min-width: 480px) and (max-width: 639px){
.show-menu{
width: 50px;
height: 44px;
left: 2%;
top: 50%;
}}
@media screen and (min-width: 640px){
.show-menu{
width: 55px;
height: 44px;
left: 2%;
top: 50%;
}}
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询