WebApp开发经验

时间：2021-02-23 10:58:24

1.自适应屏幕

<meta name="viewport" id="viewport"
      content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1">
 
2.重置页面所有元素
/*reset*/
html {
  -webkit-text-size-adjust: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  word-break: break-all;
  height: 100%;
  font-size: 62.5%;
  color: #999; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  margin: 0;
  padding: 0; }

article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  display: block; }

audio, canvas, video {
  display: inline-block; }

body, button, input, select, textarea {
  font: 400 1.2rem/1.2 "Hiragino Sans GB W3","Hiragino Sans GB",SimHei,sans-serif; }

a, input, button, select, textarea {
  -webkit-tap-highlight-color: transparent; }

textarea {
  resize: none;
  overflow-y: auto; }

img {
  border: 0;
  vertical-align: middle;
  padding: 0;
  margin: 0; }

iframe {
  display: block; }

del {
  text-decoration: line-through; }

ul {
  list-style: none; }

ol {
  list-style-position: inside; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 500; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

a {
  text-decoration: none;
  color: #999; }
 input,textarea,button{outline:none} 

table {
  border-collapse: collapse;
  border-spacing: 0; }
textarea::-webkit-input-placeholder {
  color: #ccc !important; 
}
 
3.规则谨记
①字体用rem,其余所有元素设置均用px。
②慎用表格。使用ul>li*3来代替。
③不要使用图片填充屏幕，特别是100%，容易引发意想不到的bug。
④使用div时切记一条反常理做法：div{width:100%;margin:0 2px}，会造成纵向滚动。
⑤input，img等单标签要闭合。养成良好的习惯。
4.模态窗口简单设计
.modal-bg{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:20;
    background-color:black;
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    opacity:0.8;
    display:none;
}
<!--80%透明度遮罩层 -->
<div class="modal-bg"></div>
 
今天就先写这么多吧。

相关文章