客户端页面粗略看法

时间 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

感谢网络诸位大神指点，才得已汇总，仅做参考。浏览器