移动端开发适配怎么做？移动端页面的踩坑总结
移动端开发适配怎么做？移动端页面的踩坑总结.fixed-flex{display: flex;flex-wrap: wrap;flex-direction: row;justify-content: flex-start;align-items: center;min-height: 100%;align-content: space-between;box-sizing: border-box;position: relative;} .fixed-flex-box{display: flex;flex-flow: column nowrap;justify-content: flex-start;box-sizing: border-box;position: relative} .fixed-flex>div{width: 100%;} 复制代码<div class="fixed-flex">
移动端页面的踩坑总结：1、解决手机上点击按钮的时候出现默认蓝色背景
body{line-height: 1;font-family: -apple-system-font Helvetica Neue Helvetica sans-serif;background: #fff;-webkit-tap-highlight-color:rgba(0 0 0 0); /* 解决安卓手机按钮点击出现蓝色背景*/}
复制代码
2、隐藏微信浏览器的滚动条
::-webkit-scrollbar{display:none;/* 隐藏微信浏览器滚动条 */}
复制代码
3、行数展示控制
.line1{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.line2{white-space: normal!important;display: -webkit-box!important;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
复制代码
4、图片的不高清，可以通过更换图片来解决，也可加入下方代码，可以让图片更加清晰一点
img{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering: crisp-edges;-ms-interpolation-mode:nearest-neighbor;/* 保持图片缩小后不模糊 */}
复制代码
5、关于pre标签的兼容处理
pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;word-break: break-all;}
复制代码
6、通过css实现禁止点击事件
.disabled { pointer-events: none;/*禁止点击事件*/ }
复制代码
7、弹性布局：上下两端固定，中间内容自动撑满
.content{height: 100%;display: flex;flex-direction: column;}
.scroll-cont{flex: 1;overflow-x: hidden;overflow-y: scroll;position: relative;z-index: 1;}
复制代码
<div class="content">
顶部固定内容
<div class="scroll-cont">
中间撑满剩余高度
</div>
底部固定内容
</div>
复制代码
8、某些需要页面底部放版权信息，我之前是用的定位来实现的，但是页面中有输入框之类的需要弹出键盘，就会有很多兼容问题要处理了，需要写很多js，就很麻烦；后来到朋友那里了解到flex的这种功能，就直接引用了；可以配合第6点使用
.fixed-flex{display: flex;flex-wrap: wrap;flex-direction: row;justify-content: flex-start;align-items: center;min-height: 100%;align-content: space-between;box-sizing: border-box;position: relative;}
.fixed-flex-box{display: flex;flex-flow: column nowrap;justify-content: flex-start;box-sizing: border-box;position: relative}
.fixed-flex>div{width: 100%;}
复制代码
<div class="fixed-flex">
<div class="fixed-flex-box">
内容区域
</div>
底部版权信息
</div>
复制代码
9、老生常谈的 1px 问题；我这里使用的是scss方法
- 9.1 ：下边框
@mixin borderBottom-1px($borderColor) {
position: relative;
&::before {
content: '';
display: block;
position: absolute;
left: 0;
right:0;
bottom: 0;
width: 100%;
border-bottom: 1px solid $borderColor;
transform: scaleY(0.5);
}
//引用方法 @include borderBottom-1px(#c1b5b5);
}
复制代码
- 9.2：上边框（同理，把 bottom 改为 top 就行）
- 9.3：四边都有边框及圆角
@mixin border-1px ($color $radius) {
position: relative;
&::before{
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid $color;
border-radius: rem($radius);
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
//引用方法 @include border-1px(#c1b5b5 5);
}
复制代码
- 9.4：清除边框
@mixin border-none(){
&:before{
display: none;
}
}
复制代码
- 9.5：使用
<p class="borderTop">上边框</p>
<p class="borderBottom" >下边框</p>
<p class="border">闭合边框</p>
复制代码
.borderTop{@include borderTop-1px(#c1b5b5);}
.borderBottom{@include borderBottom-1px(#c1b5b5);}
.border{@include border-1px(#c1b5b5 5);}
复制代码
10、有时候UI小姐姐的设计稿中会有很多种箭头样式，线性的，实心的，箭头的大小、颜色、圆角、粗细等等都或许会有不同，可能是不同场景会用到不一样的效果吧；如果项目多了，切图的话就会有很多，修改的话只能替换图片，就会有些不方便；
如果引用字体icon库的话，就会增加不必要的内存，因为有些是不需要的，就像阿里的iconfont库，虽说可以自己创建项目，但是添加或替换图片后，都要更改一下链接，或者下载下来替换文件，就很麻烦；所以我就自己写了一套公用的样式库
- 10.1：线性箭头
@mixin arrowIcon($direction $borderWidth $color $width){
position: relative;
&::after{
content: "";
display: block;
border-width: $borderWidth px $borderWidth px 0 0;
border-style: solid;
border-color: $color;
padding: $width px;
position: absolute;
right: ($width 1) px;
top: 50%;
}
@if $direction == "left" {
padding-right: rem(28);
&::after{
transform: rotate(-135deg) translate(-8% 72%);
}
}@else if $direction == "top" {
padding-right: rem(28);
&::after{
transform: rotate(-45deg) translate(26% 12%);
}
}@else if $direction == "right" {
padding-right: rem(20);
&::after{
transform: rotate(45deg) translateY(-50%);
}
}@else if $direction == "bottom" {
padding-right: rem(28);
&::after{
transform: rotate(135deg) translate(-65% 32%);
}
}
// @include arrowIcon(left 1 #333 4)
}
复制代码
- 使用
<span class="arrLeft">left</span>
<span class="arrRight">right</span>
<span class="arrTop">top</span>
<span class="arrBottom">bottom</span>
复制代码
.arrLeft{@include arrowIcon(left 1 #333 3)}
.arrRight{@include arrowIcon(right 1 #333 3)}
.arrTop{@include arrowIcon(top 1 #333 3)}
.arrBottom{@include arrowIcon(bottom 1 #333 3)}
复制代码
- 10.2：实心箭头
@mixin trigonIcon($direction $Width1 $Width2 $color){
position: relative;
&::after{
content: "";
display: inline-block;
border-style: solid;
margin-left: rem(8);
}
@if $direction == "left" {
&::after{
border-width: rem($Width1) rem($Width2) rem($Width1) 0;
border-color: transparent $color transparent transparent;
}
}@else if $direction == "top" {
&::after{
border-width: 0 rem($Width1) rem($Width2) rem($Width1);
border-color: transparent transparent $color transparent;
}
}@else if $direction == "right" {
&::after{
border-width: rem($Width1) 0 rem($Width1) rem($Width2);
border-color: transparent transparent transparent $color;
}
}@else if $direction == "bottom" {
&::after{
border-width: rem($Width2) rem($Width1) 0 rem($Width1);
border-color: $color transparent transparent transparent;
}
}
// @include trigonIcon(left 8 12 #333)
}
复制代码
- 使用
<span class="triLeft">left</span>
<span class="triRight">right</span>
<span class="triTop">top</span>
<span class="triBottom">bottom</span>
复制代码
.triLeft{@include trigonIcon(left 8 12 #333)}
.triRight{@include trigonIcon(right 8 12 #333)}
.triTop{@include trigonIcon(top 8 12 #333)}
.triBottom{@include trigonIcon(bottom 8 12 #333)}
复制代码
11、产品会提需求说点击导航栏的时候，自动往前或往后移动，定位在中间显示；之前用的方法存在一些兼容问题，所以又单独处理了一版；因为用的是swiper的，所以页面中需要相关文件
<link rel="stylesheet" href="css/swiper.min.css">
<div class="swiper-container nav" id="nav">
<div class="swiper-wrapper nav-list">
</div>
</div>
<script src="js/swiper.min.js"></script>
<script src="js/navBarScroll.js"></script> <!-- 封装插件的文件 -->
<script>
$(function(){
$('.nav-list').navBarScroll(
data = [
{id: 0 pid: 0 name: "全部" title: "全部"}
{id: 1 pid: 0 name: "绩效考核表" title: "绩效考核表"}
{id: 2 pid: 0 name: "考核表" title: "考核表"}
{id: 3 pid: 0 name: "专项成交表" title: "专项成交表"}
{id: 4 pid: 0 name: "成交统计表" title: "成交统计表"}
]
);
})
</script>
复制代码
;
(function($){
$.fn.navBarScroll = function(data){
//动态获取导航数据
// get_menu()
function get_menu() {
$.ajax({
type: 'get'
url: ''
dataType: 'json'
data: {}
success: function (data) {
var str = '';
if (data.error_code === 0) {
$.each(data.data function (k v) {
v.cate_name = v.name.substring(0 2);
if (k === 0) {
str = ' <div class="swiper-slide nav-a selected" navid="' v.id '"><span>' v.name '</span></div>';
} else {
str = ' <div class="swiper-slide nav-a" navid="' v.id '"><span>' v.name '</span></div>';
}
});
str = ' <div class="bar"><div class="color"></div></div>';
$('#nav .swiper-wrapper').html(str);
}
}
});
}
get();
function get() {
var str = '';
$.each(data function (k v) {
if (k === 0) {
str = ' <div class="swiper-slide nav-a navBar_item active" navid="' v.id '"><span>' v.name '</span></div>';
} else {
str = ' <div class="swiper-slide nav-a navBar_item" navid="' v.id '"><span>' v.name '</span></div>';
}
});
str = '<div class="bar"><div class="color"></div></div>';
$('#nav .swiper-wrapper').html(str);
}
var lodW = ($('.nav-a.active').outerWidth(true)-$('.bar').width())/2;
$('.bar').css({"transition-duration": "100ms" "transform": "translateX(" lodW "px)"});
//点击导航高亮
$("body").on("click" '.nav-a' function () {
var moveX = $(this).position().left $(this).parent().scrollLeft();
var pageX = document.documentElement.clientWidth;
var blockWidth = $(this).width();
var left = moveX - (pageX / 2) (blockWidth / 2);
$(".nav-list").animate({
scrollLeft: left
});
$(".nav-a").removeClass("active");
$(this).addClass("active");
var cate_index = $(this).prevAll().length;
var nowItemW = $(this).outerWidth(true);
var pxs = 0;
for(let i=0;i<=cate_index;i ){
pxs = parseInt($('.nav-a').eq(i).outerWidth(true));
// 移动距离 = 当前元素前面所有元素的宽度总合 - 当前元素的宽度
$('.bar').css({"width":nowItemW "transition-duration": "100ms" "transform": "translateX(" (pxs-nowItemW) "px)"})
}
});
}
})(jQuery);
复制代码
补充
字体小于12px设置；给的设计稿中或许会出现小于12px的字体，但是浏览器支持最小的就是12px，怎么办呢？ 那么就让它支持小于12px吧，添加下面该属性即可：
-webkit-text-size-adjust: none;
复制代码
当然最好不要全局添加，具体原因参考度娘；如何禁止小于12px呢
-webkit-text-size-adjust:'auto' !important';
