1.添加meta，使得网页在手机端能正常浏览

html 代码

    
    
    
    
    
    
    
    复制代码

2.考虑是使用px，还是使用rem

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可； 如果需要高精度还原，适配各种手机，最好还是使用rem吧伙计们

1）使用px布局，宽度可使用百分比伸缩，高度使用固定像素 html 代码

			
    		
    		
    		
    		
    								
    
     40%
    
		
    
     60%
    
	复制代码

2）使用rem的话，需要有一个辅助才能打出高额的伤害；从常用的两个辅助中选择一个； 辅助一，使用@media，根据屏幕大小自动调整 可以看看这篇文章详细介绍

辅助二，使用js动态计算，这个简直好用的不得了，简直完美还原设计稿 html 代码

    
        
        
        
                            			
    
			
     
      100% 7.2rem 设计图尺寸720，1rem=100px
     
			
     
      50% 3.6rem
     
		
    
	复制代码

我自己常用的是

3.页面样式重置，这个在pc端还是移动端都会用到的

css 代码

/*css初始化*/body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{
   margin:0;padding:0} body{
   font-size:16px;font-family: "微软雅黑","microsoft yahei","microsoft sans serif";background: #ededed;color: #313131;} a,a:hover{
   text-decoration:none;color:inherit;} em,i{
   font-style:normal} li{
   list-style:none} img{
   border:0;vertical-align:middle} table{
   border-collapse:collapse;border-spacing:0} p{
   word-wrap:break-word} input,textarea{
   outline: none;font-family: "微软雅黑","microsoft yahei";}*{
   box-sizing: border-box;} /*使用border-box盒模型使得计算位置、大小更方便*/input[type='submit'],input[type='button'],input[type='reset']{
   -webkit-appearance: none;}/*消除iPhone上按钮显示怪异的情况*/复制代码

4.使用一屏布局

这个是我在查看一些UI框架发现的东西，整个页面分三块不超过一屏，header、contaner、footer。 内容都放在container中，超过就overflow-y:scroll; 这个其实挺好用的，使得页面结构清晰，布局容易 html 代码

			
    		
    								
    
			
     
      头部
     
			
     
      页脚
     
			
     
				
      
       					内容				
      
				
      
       					内容				
      
				
      
       					内容				
      
			
     
		
    
	复制代码

5.左边定宽，右边自适应的布局，我们会经常用到

html 代码

			
    				
    						
    
			
     
				
      
				
      
			
     
						
     
				
      
				
      
			
     
						
     
				
      
       2222222222222
      
				
      
       1111111111111111111111111111111111111111111111
       
222222222222222
      
			
     
		
    
			复制代码

6.模块化、组件化开发，防止css命名重复，提高开发效率

这个对我这个英语词汇量不大的来说，简直是福音啊， 以前写css老是怕重名，写的各种奇怪命名，效率还低， 自从有了这个妈妈再也不用担心

7.一像素的问题

在高分屏上写一个像素边框，那显示的活脱脱的就是两个像素， 设计师不满意，老板不满意； 我们可以用伪元素和css3来解决 css 代码

.item{    width:2rem;    height:0.5rem;}.item:after{   	content: " ";    position: absolute;    left: 0;    right: 0;    height: 1px;    z-index: 2;    bottom: 0;    border-bottom: 1px solid #D9D9D9;    -webkit-transform-origin: 0 100%;    transform-origin: 0 100%;    -webkit-transform: scaleY(.5);    transform: scaleY(.5);}复制代码