common

最新推荐文章于 2020-09-10 16:05:19 发布

原创最新推荐文章于 2020-09-10 16:05:19 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

75 篇文章

订阅专栏

本文介绍了一个响应式布局项目，首先基于320px设计稿，设定1rem为20px来初始化HTML文件，然后详细阐述了如何加载和使用组件，并探讨了common.js在其中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于响应式的初始化html文件（设计稿为320，1rem等于20px）

<!DOCTYPE html>
<html>
  <head>
  <meta  charset="utf-8">
    <title>element</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <style type="text/css">
    	html,body,div,ul,li,ol,p,a,button,span{margin: 0px;padding: 0px;position: relative;}
			em{font-style: normal;}
			ul{list-style: none;}
			button,input,img{border: none;outline: none;}
			li{float: left;}
			a{text-decoration: none;color: #333333;}
			span,i{display: inline-block;}
			span,strong,p,a{font-size: 0.7rem; color: #333333;}
			a:hover{cursor: pointer; text-decoration: underline; color: red;}
       /*public*/
      	.line_top{border-top: 0.1rem solid #f5f5f5;border-top-style: dashed;}
        .line_bottom{border-bottom: 0.1rem solid #f5f5f5;border-bottom-style: dashed;}
        .line_left{border-left: 0.1rem solid #f5f5f5;border-left-style: dashed;}
        .line_right{border-right: 0.1rem solid #f5f5f5;border-right-style: dashed;}
        .clearfix{clear: both;}
        .hor{margin-left: auto !important;margin-right: auto !important; display: block !important;position: relative !important;}
        .ver{top: 50%;transform: translate(0,-50%);position: relative !important;}
        .hv{margin-left: auto !important;margin-right: auto !important; display: block !important;position: relative !important;top: 50%;transform: translate(0,-50%);}
        .ell{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
        .ul{padding-left: 0.5rem;}
        .ul li span{top: 50%;transform: translate(0,-50%);display: block; position: relative;}
        .nav>div{width: 100%;height: auto;padding-left: 0.7rem;display: block; padding-right: 0.7rem; top: 50%;transform: translate(0,-50%);position: relative !important;}
        .nav>div>span{height: 0.7rem;line-height: 0.7rem; display: inline-block;position: relative;color: white;}
        .shadow{box-shadow: 2px 5px 10px #e6e6e6;}
        @font-face {font-family: "iconfont";
          src: url('./static/fonts/iconfont.eot'); /* IE9*/
          src: url('./static/fonts/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('./static/fonts/iconfont.woff') format('woff'), /* chrome, firefox */
          url('./static/fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('./static/fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }
        .iconfont {
          font-family:"iconfont" !important;
          font-size:0.80rem;
          font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
          color: white;
        }
    </style>
    <script type="text/javascript">
      (function(doc, win) {  
    var docEl = doc.documentElement,  
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',  
        recalc = function() {  
            var clientWidth = docEl.clientWidth;  
            if (!clientWidth) return;  
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';  
        };  
    if (!doc.addEventListener) return;  
    win.addEventListener(resizeEvt, recalc, false);  
    doc.addEventListener('DOMContentLoaded', recalc, false);  
})  
(document, window); 
    </script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <style type="text/css">
    #app{width: 16.0rem; text-align: center;}
  </style>
</html>

2、加载组件

<template>
	<div class="pc" >
		<img src="../../../static/images/common/loading.gif" class="hv loading">
	</div>
</template>
<style scoped>
	.loading{width: 1rem !important;height: 1rem !important;}
</style>
<script type="text/babel">
	export default{
		data(){
			return{

			}
		}
	}
</script>

图片资源

3、common.js

export const getData = ()=>{
	if(typeof(Storage) !== "undefined") {  
        // 退出登陆的时候需要把sessionStorage.data赋值为字符串0
		if(sessionStorage.data!==undefined&&typeof(sessionStorage.data)!=='0'){ 
        return JSON.parse(sessionStorage.data)
    	}else{
    		return 0
    	}
    	} else {  
        alert("抱歉！您的浏览器版本过低，导致某些功能无法正常使用，请升级您的浏览器！")
    	}  
}
export const getSessionStorage = () => {
if(typeof(Storage) !== "undefined") {  
        return sessionStorage
    	} else {  
        alert("抱歉！您的浏览器版本过低，导致某些功能无法正常使用，请升级您的浏览器！")
    	} 
}
export const setLocalStorage = (key,value) =>{
	window.localStorage.setItem(key, value)
}
export const getLocalStorage = (key) => {
	return window.localStorage.getItem(key)
}
export const removeLocalStorage = (key) => {
	window.localStorage.removeItem(key)
}