Summary of trampling pit on mobile terminal page:

1. Solve the problem that the default blue background appears when the button is clicked on the mobile phone

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);  /* Solve the problem of android phone button clicking blue background */}
Copy the code

2. Hide the scroll bar of wechat browser

::-webkit-scrollbar{display:none;/* Hide the wechat browser scroll bar */}
Copy the code

3, line number display control

.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; }Copy the code

4, the picture is not hd, you can change the picture to solve the problem, you can also add the code below, you can make the picture a little clearer

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;/* Keep the image from being blurred */}
Copy the code

5. Compatibility processing of Pre labels

pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;word-break: break-all; }Copy the code

6. Prohibit click events through CSS

.disabled { pointer-events: none;/* Disallow clicking on events */ }
Copy the code

7, elastic layout: the upper and lower ends are fixed, the middle content is automatically full

.content{height: 100%;display: flex;flex-direction: column; }.scroll-cont{flex: 1;overflow-x: hidden;overflow-y: scroll;position: relative;z-index: 1; }Copy the code

<div class="content">Top fixed content<div class="scroll-cont">The center supports the remaining height</div>Bottom fixed content</div>
Copy the code

8, some need to put copyright information at the bottom of the page, I was using the positioning to achieve, but the page has input box and the like need to pop up the keyboard, there will be a lot of compatibility problems to deal with, need to write a lot of JS, is very troublesome; Later, WHEN I learned about flex’s functionality from my friends, I directly referenced it. Can be used in conjunction with point 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%; }Copy the code

<div class="fixed-flex">
    <div class="fixed-flex-box">The content area</div>Bottom Copyright Information</div>
Copy the code

9. The old 1px question; I’m using the SCSS method here

9.1: Bottom border

 @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); } // Reference methods@include borderBottom-1px(#c1b5b5);
  }
Copy the code

9.2: Top border (similarly, change bottom to Top)
9.3: All sides have borders and rounded corners

 @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; } // Reference methods@include border-1px(#c1b5b5,5);
  }
Copy the code

9.4: Clear borders

 @mixinborder-none(){ &:before{ display: none; }}Copy the code

9.5:

    <p class="borderTop">On the border</p>
    <p class="borderBottom" >Under the frame</p>
    <p class="border">Closed the border</p>
Copy the code

.borderTop{@include borderTop-1px(#c1b5b5); }.borderBottom{@include borderBottom-1px(#c1b5b5); }.border{@include border-1px(#c1b5b5,5); }Copy the code

10, sometimes UI little sister in the design draft will have a lot of arrow styles, linear, solid, the size of the arrow, color, rounded corners, thickness and so on May be different, may be different scenes will use different effects; If there are many projects, there will be a lot of cutting diagrams, and modification can only replace pictures, which will be some inconvenient;

If you reference font icon library, it will increase unnecessary memory, because some are not needed, just like Ali’s Iconfont library, although you can create projects by yourself, but after adding or replacing pictures, you have to change the link, or download and replace the file, it is very troublesome; So I wrote my own common style library

10.1: Linear arrows

@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)}Copy the code

use

<span class="arrLeft">left</span>
<span class="arrRight">right</span>
<span class="arrTop">top</span>
<span class="arrBottom">bottom</span>
Copy the code

.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)}
Copy the code

10.2: Solid arrow

 @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)}Copy the code

use

<span class="triLeft">left</span>
<span class="triRight">right</span>
<span class="triTop">top</span>
<span class="triBottom">bottom</span>
Copy the code

.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)}
Copy the code

11, the product will demand that click on the navigation bar, automatically move forward or back, positioning in the middle display; There are some compatibility problems with the method used before, so a separate version is processed; Because I use Swiper, I need related files in the page

<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>  <! Package plugin files -->
<script>
    $(function(){$('.nav-list').navBarScroll(
            data = [
                {id: 0.pid: 0.name: "All".title: "All"},
                {id: 1.pid: 0.name: "Performance Appraisal Form".title: "Performance Appraisal Form"},
                {id: 2.pid: 0.name: "Examination form".title: "Examination form"},
                {id: 3.pid: 0.name: "Special Transaction Table".title: "Special Transaction Table"},
                {id: 4.pid: 0.name: "Transaction Statistics".title: "Transaction Statistics"},]); })</script>
Copy the code

; (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," transient-duration ": "100ms", "transform": "translateX(" + (pxs-nowItemW) + "px)"}) } }); } })(jQuery);Copy the code

supplement

Font < 12px; The font size may be smaller than 12px, but the browser supports a minimum of 12px. Make it less than 12px and add the following attributes:

-webkit-text-size-adjust: none;
Copy the code

Of course, it is best not to add global, for specific reasons refer to Baidu; How do you ban less than 12px

-webkit-text-size-adjust:'auto' ! important';
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Common styling on mobile

Summary of trampling pit on mobile terminal page:

Common styling on mobile

Summary of trampling pit on mobile terminal page:

Related Posts

SetTimeout and setInterval

Front-end interview basics – This points to

The Flutter Exercise (8) – a simple clipboard implementation