【经验心得】弹性布局em-----模板----640设计稿
结构方面
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<link rel="stylesheet" href="http://static1.utan.com/app_renyuxian/css/??base/reset.css,base/reset_mobile.css,base/pieces.css?v=1427788351">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<h1><img src="images/backarrow.png">薰衣草小宝马</h1>
<div class="banner"><img src="images/bannner.jpg"></div>
<div class="time_count">TA的活动倒计时<span><b>8</b>天<b>13</b>时<b>8</b>分</span></div>
<div class="bargain">
您的好友XXXXX想买“100%澳洲薰衣草小宝马”，快来TA砍价吧，砍到多少是多少喔！
<div class="bargain_btn"><a href="#">帮TA砍一刀</a></div>
</div>
</div>
<!--屏幕适配JS 重要部分-->
<script>
new function (){
var _self = this ;
_self.width = 640; // 设置默认最大宽度
_self.fontSize = 16; // 默认字体大小
_self.widthProportion = function (){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
_self.changePage = function (){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
}
_self.changePage();
window.addEventListener('resize', function (){_self.changePage();}, false );
};
</script>
</body>
</html>
Sass方面
/*css reset*/
*{box-sizing:content-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;}
body,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,li,form,button,input,textarea,th,td{margin:0;padding:0}
cite,em,var,i{font-style:normal}
form{display:inline}
ul,ol,li{list-style:none}
a{text-decoration:none;color:#333}
img{vertical-align:top;border:none 0;-ms-interpolation-mode:bicubic}
button,input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
input,button,select,textarea{outline:none}
textarea{resize:none}
@import "define";
/*sass pxTOem function start 重要部分*/
@import "define";
body{font-size:100%;}
@function strip-units($number){
@return $number / ($number * 0 + 1);
}
$base-font-size: 16px !default;
@function pxToem($target-size,$context:$base-font-size){
@if not unitless($target-size){
$target-size: strip-units($target-size); }
@if not unitless($context){
$context: strip-units($context);
}
@return ($target-size / $context) * 1em;
}
/*sass pxTOem function end*/
.wrapper{
max-width:640px;
margin:0 auto;
font-size:pxToem(40);
background:#e8ccef;
}
/*index start*/
h1{
font-size:pxToem(40,40);
width:pxToem(640,40);
height:pxToem(88,40);
line-height:pxToem(88,40);
text-align:center;
color:#793499;
font-weight:normal;
background:#fff;
img{
float:left;
width:pxToem(46,40);
height:pxToem(46,40);
margin:pxToem(20,40) 0 0 pxToem(20,40);
}
}
.banner{
width:pxToem(640,40);
img{
width:pxToem(640,40);
}
}
.time_count{
font-size:pxToem(26,40);
height:pxToem(105,26);
line-height:pxToem(105,26);
text-align:center;
color:#793499;
span{
font-size:pxToem(29,26);
color:#3b3b3b;
b{
font-size:pxToem(50,29);
color:#793499;
background:#fff;
padding:0 pxToem(10,50);
margin:0 pxToem(10,50);
font-weight:normal;
}
}
}
.bargain{
font-size:pxToem(28,40);
margin:0 pxToem(28,28);
padding:pxToem(30,28) pxToem(24,28);
background:#fff;
border-radius:pxToem(15,28);
line-height:pxToem(50,28);
color:#793499;
}
.bargain_btn{
font-size:pxToem(40,28);
a{
display:block;
margin:pxToem(25,40) auto pxToem(15,40);
width:pxToem(288,40);
height:pxToem(66,40);
line-height:pxToem(66,40);
color:#fff;
background:#9658b2;
border-radius:pxToem(30,40);
box-shadow:0 0 pxToem(5,40) #793499;
text-align:center;
}
}
/*index end*/
转化出来的css样式表
/* line 65, ../sass/define.scss */
.pro_infor_bt {
zoom: 1;
}
/* line 66, ../sass/define.scss */
.pro_infor_bt:after {
content: '\20';
display: block;
height: 0;
clear: both;
}
/* line 2, ../sass/style.scss */
body {
font-size: 100%;
}
/*sass pxTOem function start*/
/*sass pxTOem function end*/
/* line 17, ../sass/style.scss */
.wrapper {
max-width: 640px;
margin: 0 auto;
font-size: 2.5em;
background: #e8ccef;
}
/*index start*/
/* line 25, ../sass/style.scss */
h1 {
font-size: 1em;
width: 16em;
height: 2.2em;
line-height: 2.2em;
text-align: center;
color: #793499;
font-weight: normal;
background: #fff;
}
/* line 34, ../sass/style.scss */
h1 img {
float: left;
width: 1.15em;
height: 1.15em;
margin: 0.5em 0 0 0.5em;
}
/* line 42, ../sass/style.scss */
.banner {
width: 16em;
}
/* line 44, ../sass/style.scss */
.banner img {
width: 16em;
}
/* line 49, ../sass/style.scss */
.time_count {
font-size: 0.65em;
height: 4.03846em;
line-height: 4.03846em;
text-align: center;
color: #793499;
}
/* line 55, ../sass/style.scss */
.time_count span {
font-size: 1.11538em;
color: #3b3b3b;
}
/* line 58, ../sass/style.scss */
.time_count span b {
font-size: 1.72414em;
color: #793499;
background: #fff;
padding: 0 0.2em;
margin: 0 0.2em;
font-weight: normal;
}
/* line 70, ../sass/style.scss */
.bargain {
font-size: 0.7em;
margin: 0 1em;
padding: 1.07143em 0.85714em;
background: #fff;
border-radius: 0.53571em;
line-height: 1.78571em;
color: #793499;
}
/* line 79, ../sass/style.scss */
.bargain_btn {
font-size: 1.42857em;
}
/* line 81, ../sass/style.scss */
.bargain_btn a {
display: block;
margin: 0.625em auto 0.375em;
width: 7.2em;
height: 1.65em;
line-height: 1.65em;
color: #fff;
background: #9658b2;
border-radius: 0.75em;
box-shadow: 0 0 0.125em #793499;
text-align: center;
}
/*index end*/
demo
