Mobile-First Knowledge 1

Last Update:2017-06-19 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Viewport (visual area window) <meta name= "viewport" content= "" > (important) By default does not set viewport, the general visual area width on the mobile side is 980. Width: Visibility of the area (number| | Device-width) user-scalable whether to allow user scaling (yes| | NO),---->>IOS10 Invalid Initial-scale initial scaling minimum-scale minimum zoom maximum-scale Maximum zoom ratio

<!--Getting Started practice--

<!doctype html>

(function () {

var html = document.documentelement;

var hwidth= html.getboundingclientrect (). width;

Html.style.fontSize = hwidth/15+ "px";

})()

</script>

Body

H1,

UL {

margin:0;

padding:0;

}

Text-decoration:none;

}

Li {

List-style:none;

}

#header {

Height:2.06rem;

Background: #ef3239;

position:relative;

border-bottom:1px solid #a82d31;

Box-sizing:border-box;

}

#header a {

Width:2.56rem;

Height:1.76rem;

Position:absolute;

top:0px;

Text-align:center;

Line-height:1.76rem;

}

#header #task {

left:0px;

}

#header #task Span {

Font-size:0.74rem;

}

#header #refresh {

right:0px;

}

#header #refresh Span {

Font-size:0.72rem;

}

#header span {

Color: #ffffff;

}

#header H1 {

Text-align:center;

Font-size:0.78rem;

Color: #ffffff;

Line-height:1.76rem;

}

#header H1 span {

Font-size:0.52rem;

Margin-right:0.32rem;

}

. Active {

Color: #f23838!important;

}

#nav {

Height:2.1rem;

Background: #fdfdfd;

border-top:1px solid #bobobo;

border-bottom:1px solid #ccc;

Box-sizing:border-box;

}

#nav. Active span {

Font-size:0.72rem;

Top:0.14rem;

Left:0.1rem;

}

#nav a {

Float:left;

width:25%;

Height:2.06rem;

Text-align:center;

Line-height:2.06rem;

Font-size:0.7rem;

Color: #848689;

}

#nav #price_box {

Width:0.74rem;

Display:inline-block;

Vertical-align:middle;

}

#nav #price_box Span {

Float:left;

Font-size:0.56rem;

}

#nav #price_box. Glyphicon-chevron-down {

Left: -0.05rem;

Top: -0.08rem;

}

#nav. Glyphicon-filter {

Font-size:0.74rem;

Top:0.16rem;

Left:0.1rem;

}

#list Li {

Background: #fdfdfd;

Height:5.62rem;

border-bottom:1px solid #e0e0e0;

Box-sizing:border-box;

}

#list a {

Padding:0.46rem 0.46rem 0.44rem;

Height:4.7rem;

Float:left;

}

#list img {

Width:4.7rem;

Height:4.7rem;

Float:left;

}

#list. soanwrap {

Float:right;

Width:8.64rem;

}

#list. Soanwrap. stitle {

Font-size:0.56rem;

Line-height:0.88rem;

Color: #333;

Margin-top:0.1rem;

Display:block;

}

#list. Soanwrap. Sprice {

Display:block;

Font-size:0.76rem;

Line-height:1.28rem;

Margin-top:0.62rem;

Color: #f23838;

}

#list. Soanwrap. Scommont {

Font-size:0.56rem;

Line-height:0.94rem;

Display:block;

Color: #808080;

}

</style>

<!--uses the bootstrap font style--

<body>

</a>

</a>

<a href= "Javascipt:;" class= "active" > Integrated </a>

<a href= "Javascipt:;" > Sales </a>

<a href= "Javascipt:;" > Price

</a>

<a href= "Javascipt:;" > Filter </a>

</nav>

<li>