Mobile webapp adaptive practice (css sprite production gadget practice) with pictures and texts_html/css_WEB-ITnose

Why write this

I have written an article (link) about webapp adaptive screen before, but most people can’t understand it, so I will make a version with pictures and text. Although it is just a simple page, I also encountered some problems during the process of making it, which is a good thing!

The sample github address: https://github.com/iwangx/WebApp

Preparation

psd: This is the most important thing, used to measure the size, and Cutting, I don’t agree with leaving the work of cutting to UI. It’s better to cut it yourself. The resolution of the psd I made is 640px width. Of course, this psd is downloaded from the Internet

Css sprite production Tool: The latest version (v4.3) is a small program that can splice multiple pictures into one picture and generate code (independently developed by myself)

webstorm: front-end development tool

Markman: front-end Dimension and color measurement tool

photoshop: cutting tool

sass: css pre-compilation tool

The first step, cutting

I use photoshop The cut picture is as follows:

Of course it may not be clear because it is a white picture after all

The second step is to build the frame

The general structure is this, address: https://github.com/iwangx/WebApp

Part 2, css structure

css mainly uses sass for pre-compilation The tool has the following structure:

reset.scss file is mainly for resetting element styles

app.scss file is for single page style

The size.scss file contains variables for the mobile phone’s adaptive size of 1-400

Second step, js structure

The most important thing in js is the adaptive code, address: Mobile terminal adaptation and zepto are not introduced because it is just a simple example

The third step, html page structure

The page structure is as follows:

header: header title

nav: header navigation

controller: middle list

footer: bottom navigation

Step 4. Generate sprite image

Use sprite image generation tool: generate sprite image and generate code:

Copy the code to the app.scss directory in the css directory

Of course, the premise is to introduce size, a file containing aspect variables, otherwise $_* will not be recognized and an error will be reported

The fifth step, page and css encoding

css code:

@import "size";//所有图片变量@mixin sprite{background:url(../images/sprite.png) no-repeat ;background-size:$_138 $_163;}@mixin icon_right{height:$_59;width:$_59;background-position:0 -$_75 0 -$_5;}@mixin icon_left{height:$_59;width:$_59;background-position:0 0;}@mixin icon_tag{height:$_44;width:$_65;background-position:0 -$_1 0 -$_119;}@mixin icon_person{height:$_44;width:$_65;background-position:0 0 -$_66;}@mixin icon_book{height:$_44;width:$_65;background-position:0 -$_73 0 -$_71;}@mixin icon_more{height:$_44;width:$_65;background-position:0 -$_73 0 -$_119;}body{background: #fbfbfb}.sprite{@include sprite;}.header{position: fixed;background: #dd3131;height: $_90;line-height: $_90;;width: 100%;left: 0;top: 0;font-size: $_40;color: #fff;text-align: center;  button{position: absolute;top: $_16;border: $_2 solid #fff;border-radius: 50%;box-sizing: content-box}}.btn-left{@include icon_left;left: $_16;}.btn-right{@include icon_right;right: $_16;}.nav{display: -webkit-box;position: fixed;left: 0;top: $_90;color: #3d3d3d;font-size: $_30;width: 100%;border-bottom: $_1 solid #e7e5e6;  a{display: block;height: $_60;line-height: $_60;text-align: center;background: #fff;-webkit-box-flex: 1;border-right: $_1 solid #e7e5e6;box-sizing: border-box;}}.controller{padding: $_151 0 $_100 0;}.list{  li{border-bottom:$_1 solid #cfcfcf }  a{display: -webkit-box;padding: $_16;}  img{height: $_122;width: $_122;display: block}}.list-right{-webkit-box-flex: 1;padding-left: $_15;  h1{color: #555;font-size: $_24;}  p{color: #878787;font-size: $_18;margin-top: $_15;line-height: 1.5}}.footer{height: $_100;position: fixed;left: 0;bottom: 0;width: 100%;display: -webkit-box;background: #4a4a4a;text-align: center;  a{display: block;-webkit-box-flex: 1;box-sizing: border-box;padding-top: $_10;border-right: $_1 solid #fff;    &:last-child{border-right: none}  }  i{display: block;margin: 0 auto}  span{color: #fff;font-size: $_24;display: block;margin-top: $_5;}}.icon_book{@include icon_book}.icon_tag{@include icon_tag}.icon_person{@include icon_person}.icon_more{@include icon_more}

html code:

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui">    <meta name="author" content="wangxing">    <meta name="screen-orientation" content="portrait">    <meta name="x5-orientation" content="portrait">    <meta name="format-detection" content="telephone=no">    <title>app自适应</title>    <link rel="stylesheet" href="/css/reset.css">    <link rel="stylesheet" href="/css/app.css">    <script src="/js/lib/resize.js"></script></head><body>    <header class="header">        <button class="sprite btn-left"></button>        <span>远程酒业</span>        <button class="sprite btn-right"></button>    </header>    <nav class="nav">        <a href="javascript:;">资讯</a>        <a href="javascript:;">产品</a>        <a href="javascript:;">实战</a>        <a href="javascript:;">讨论</a>    </nav>    <section class="controller">        <ul class="list">            <li>                <a href="#">                    <img src="src" alt="图片">                    <div class="list-right">                        <h1>酒名字</h1>                        <p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>                    </div>                </a>            </li>            <li>                <a href="#">                    <img src="src" alt="图片">                    <div class="list-right">                        <h1>酒名字</h1>                        <p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>                    </div>                </a>            </li>            <li>                <a href="#">                    <img src="src" alt="图片">                    <div class="list-right">                        <h1>酒名字</h1>                        <p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>                    </div>                </a>            </li>            <li>                <a href="#">                    <img src="src" alt="图片">                    <div class="list-right">                        <h1>酒名字</h1>                        <p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>                    </div>                </a>            </li>        </ul>    </section>    <footer class="footer">        <a href="#">            <i class="sprite icon_book"></i>            <span>资讯</span>        </a>        <a href="#">            <i class="sprite icon_tag"></i>            <span>产品</span>        </a>        <a href="#">            <i class="sprite icon_person"></i>            <span>实战</span>        </a>        <a href="#">            <i class="sprite icon_more"></i>            <span>讨论</span>        </a>    </footer></body></html>

Where pictures are used, there are two main classes, one is the class of the sprite picture, and the other is the class he quoted. Combining the two

You can see that the sizes in the css code are all $_*, which is the measured size, including the font size is also

This constitutes our webapp

This is what it looks like on iphone5

This is what happens on iPhone 6

This is what it looks like on tablet

Conclusion

I hope this blog is useful to everyone Help, especially for newbies, I also hope you can give me more opinions