Case purpose

I mainly consolidate the knowledge of mobile terminal development and use what I have learned to write pages. It is a small case of practice. Consolidate HTML CSS and other knowledge, in the development of more thinking, make efficiency more efficient.

The development of preparation

  • Development tool: WebStorm
  • Technology stack:
    • Page skeleton: HTML, HTML5
    • Style sheet: CSS, using SASS preprocessor
    • Test: browser simulation real machine test, XAMPP real machine simulation

Sass Chinese comment error

  • Error: Invalid GBK character “\xE5”

The development of thinking

  • Set the viewport

    Set the width to the width of the device, with an initial scale value of 1.0 meaning no scaling

    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
Copy the code

  • Unit selection

    Select VW + REM for mobile terminal

    notes

  • Set font icon

    • CTRL + Shift + Alt + S (Slice save shortcut)
    • Set the font icon, once you have the PSD design, select the vector layer and deselect it, CTRL +T to see if it is distorted, if it is vector, save it in SVG format, CTRL + Shift + Alt + W
    • Deposit to the cloudwww.iconfont.cn/Icon library project
    • Download the font icon to the local, iconfont. CSS place the CSS directory, pay attention to modify the font file path, other font files into the font file, classification and storage
    • Font icon style is introduced in HTML, then font side: Inherit, the purpose is to make the font size change with the screen

  • Sass Common Component Extraction (simple modularization)

    • Create _global.scss as a common style table

      • For example, clear the default styles

        • -webkit-text-size-adjust: none; Disable text zooming
        • -webkit-tap-highlight-color: rgba(0,0,0,0);
        • -webkit-appearance: None; border-radius: 0px;
        • Base HTML tag base style

      • Clear float

        • @mixin clear{
  &:after{
    content: ' ';
    display: block;
    clear: both; }} // Where references are needed,@includeJust clear itCopy the code

      • Extract text class

        @mixin font($size,$height, $color) {font: $size#{'/'} $heightMicrosoft Yahei;color: $color; } / / use@include font(rem(30),rem(65),#fff5fd);
Copy the code

      • Common style blocks for pages, such as navigation bars

      • Calculate the rem

        • //rem base value:100px = 1remWidth of current design750px, set // according to the specific design drawing7.5 rem = 100vw = 1Font-size = "font-size"100vw / 7.5 rem = 13.3333333 ..vw

html{
  font-size: calc(100vw/7.5);
}
@function rem ($num){
  @return ($num/100) * 1rem;
}
Copy the code

      • . other

    • In other pages, @import “global”;

  • Text is centered above and below the element area

    • Line-height centers the text relative to the top and bottom, but not absolutely, so we can use the reference frame to center it

      .title{
  padding: 0 rem(60);
  height: rem(154);
  padding-top: rem(20);

  font-size: 0; // Inline block element features: newlines have Spaces, so parentfont-size: 0text-align: center; Before {// create blank reference frame content:"";
    width: 0;
    height: 100%; // Parent height100%
    display: inline-block;
    vertical-align: middle; // Create an intermediate reference frame}span{// The actual element to displaydisplay: inline-block;
    vertical-align: middle; // Absolutely center according to the blank reference framefont-size: rem(32);
    line-height: rem(48);
    color: #fff; }}Copy the code

  • Sprite figure

    Blog.csdn.net/allenyhy/ar…

    When designers do not convert ICONS to SVG and cannot use font ICONS, we can consider using Sprite images to reduce image requests. The idea is to put lots and lots of small ICONS on one image and use backgrount-position to move different small ICONS. Show different pictures

  • Thinking about the layout of the login page (expand the text to be centered up and down within the element area)

    If we do the login page layout later, we want the login box to always be in the middle of the page, so I think we can use the reference frame method to center it in the middle.

    • Body sets the reference frame

       body:before{// create a blank reference frame"";
     width: 0;
     height: 100%; // Parent height100%
     display: inline-block;
     vertical-align: middle; // Create an intermediate reference frame}Copy the code

    • Let the login page be set to

    display: inline-block;
vertical-align: middle; 
Copy the code

    rendering

Lot code