客戶端頁面粗略看法

時間 2019-11-30

標籤客戶端頁面粗略看法简体版

原文原文鏈接

近期作客戶端頁面，非常迷茫，過程當中，學習了很多知識，僅做總結，以備參考。css

通常咱們拿到設計稿是640px寬度的
這個時候，把圖片按照640px原大小切下，另存爲png
使用ps把設計稿縮放一半50%
按照這個縮放以後的320px寬度,切頁面
裏面的圖片background-size:50 % 50%
圖片字體間距都是縮放一半的，按照320px的測量來寫
設置樣式 html {font-size:62.5%}
在使用rem寫大小的時候 1rem=10px 按照這個比例去進行換算
好比縮放320px的設計稿裏面的字體大小是12px.這個時候，寫css就是 12/10=1.2rem大小
圖片大小是30px.這個時候css寫圖片寬度：30/10=3rem 高度能夠height:auto
意思就是圖片高保真，按照原圖切，寫樣式的時候，按照縮放以後的大小寫，便可html

最外層設置寬度 100%。或者（max-width:640px;）
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
這樣可設置padding,而不會撐破布局
或者個性化定製 css設置 html{font-size:10px}
以後，下面進行寫 span{font-size:2rem;}也就是至關於 span{font-size:20px}
當往後須要調整字體大小的時候，直接在 html{font-size:10px}這裏修改 10px的大小便可。修改一個地方
改變了全局的字體大小html5

這裏爲何說到設置了 font-size:62.5% & font-size:10px 以後,就是至關於 1rem=10px呢
由於,目前大部分瀏覽器默認字體是 16px.因此^android

說到這裏,通常的業務需求,這樣作,能夠,.每一個機型顯示的字體大小都是同樣大小的.
若是業務需求,不一樣機型,不一樣的字體大小.iphone6上面的字體大小,大於iphone4上面的字體,這樣的需求時候
就須要
@media screen and (min-width:100px){ /* iPhone 4,5 */
html{ font-size: 10px;}
}
@media screen and (min-width:320px){ /* iPhone 4,5 */
html{ font-size: 10px;}
}
@media screen and (min-width:375px){ /* iPhone 6 */
html{ font-size: 12px;}
}
@media screen and (min-width:414px){ /* iPhone 6 plus */
html{ font-size: 12px;}
}
@media screen and (min-width:600px){
html{ font-size:14px;}
}
這樣設置了.下面 1rem=10px span{font-size:1rem}
或者使用百分比
@media all and (max-width: 320px) {
html,
body {
font-size: 62.5%;
}
}
@media all and (min-width: 321px) and (max-width: 413px) {
html,
body {
font-size: 72.5%;
}
}
@media all and (width: 414px) {
html,
body {
font-size: 82.5%;
}
}
這樣設置以後,也是按照 1rem=10px 去進行換算 ios

<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>HTML5移動端開發模板</title>

<meta name="keywords" content="" />

<meta name="description" content="" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

<meta name="format-detection" content="telephone=no" />

<meta content="email=no" name="format-detection" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style type="text/css">
/*reset 重置*/
@charset "utf-8";web

body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,
td,th,button,strong,em,select,video,canvas{margin:0;padding:0;}
li{list-style:none;}
table{ border-collapse:collapse;}
textarea{resize:none;overflow:auto;}
img{ border:none; vertical-align:middle;}
em{ font-style:normal;}
a{ text-decoration:none;}
a,input{
-webkit-appearance: none;/*屏蔽陰影*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
/*ios android去除自帶陰影的樣式*/
}
a, img {
/* 禁止長按連接與圖片彈出菜單 */
-webkit-touch-callout: none;

}
html{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
/* 禁止選中文本(如無文本選中需求,此爲必選項) */
-webkit-user-select: none;
user-select: none;
-webkit-font-smoothing: antialiased; //讓頁面裏的字變得清晰。
-moz-osx-font-smoothing: grayscale; //讓頁面裏的字變得清晰。
}
/*public*/
@media screen and (min-width:100px){ /* iPhone 4,5 */
html{ font-size: 10px;}
}
@media screen and (min-width:320px){ /* iPhone 4,5 */
html{ font-size: 10px;}
}
@media screen and (min-width:375px){ /* iPhone 6 */
html{ font-size: 12px;}
}
@media screen and (min-width:414px){ /* iPhone 6 plus */
html{ font-size: 12px;}
}
@media screen and (min-width:600px){
html{ font-size:14px;}
}
body{font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif;
overflow-x:hidden; overflow-y:auto;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
.fl{float:left;}
.fr{float:right;}
</style>
</head>
<body>
<div>
<div>這是一個移動端開發模板</div>
</div>
</body>
</html>
PS:這段模板參考段亮博客
http://www.duanliang920.com/learn/web/html5/321.htmlcanvas

感謝網絡諸位大神指點，才得已彙總，僅做參考。瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。