手机端自适应页面通用CSS及公用HTML写法

最新推荐文章于 2024-05-23 18:39:43 发布

斌道天下

最新推荐文章于 2024-05-23 18:39:43 发布

阅读量1.5w

点赞数 7

分类专栏： web前端文章标签：通用CSS 手机端自适应通用HTML

本文链接：https://blog.csdn.net/vipbin520/article/details/81143608

版权

web前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

把页面的通用属性全部写出来。

所有的手机端新建项目时候都可以直接拿这套代码快速搭建一个手机端框架。

js中规定了页面最大宽度。为16rem。所以width：16rem；就等于width：100%；

我一般喜欢把边距设置为0.5rem。所以页面一般宽度我写了15rem。

rem写法好处是，自适应手机屏，手机屏不管是大小，都完美显示，不会错位。

相比用百分比写法，rem写法计算相对简单。

设计图画多大像素就对应写多少rem。比百分比页面精确。

HTML部分，在html标签上写一个id。然后js控制html页面宽度。layui.js 和 jquery.js 自行引入。我就不提供了。

<!DOCTYPE html>
<html lang="en" id="leekoh">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
		<link rel="stylesheet" href="layui/css/layui.css" />
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="layui/layui.js"></script>
		<title></title>
	</head>
	<body>
		<nav>
			<a onClick="javascript :history.back(-1);"><i class="layui-icon layui-icon-left" style="color: #fff; width: 40px; line-height: 2rem;"></i></a>
			<span class="renwu">首页</span>
		</nav> 
		<div class="nav_bg"></div>
	</body>
</html>

css部分清除原始的标签属性。后面用起来更顺手。

*{
  margin: 0;
  padding: 0;
  border: 0;
  color: #333;
  font-family: "\5FAE\8F6F\96C5\9ED1", Arial;
}
html {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-size: 20px;
  background: #F2F2F2;
}
body {
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
}
a {
  text-decoration: none;
  color: #333;
  webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
}
table {
  border: 0;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
}
table th,
table td {
  border: 0;
}
img {
  border: 0;
  vertical-align: top;
}
i,
em {
  font-style: normal;
}
ol,
ul,
li {
  list-style: none;
}
input,
textarea,
select,
button {
  padding: 0 ;
  margin: 0;
  outline: none;
  font-family: "\5FAE\8F6F\96C5\9ED1", Arial;
}
input[type="submit"] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  /*去除input默认样式*/
}
input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  /*去除input默认样式*/
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}
.color_fff {
  color: #fff;
}
nav {
  width: 15rem;
  padding: 0 0.5rem;
  height: 2rem;
  background: #DD2727;
  color: #fff;
  overflow: hidden;
  margin: auto;
  position: fixed;
  top: 0;
}
nav a {
  width: 3rem;
  height: 2rem;
  color: #fff;
  float: left;
  line-height: 2rem;
}
nav a:nth-child(3) {
  width: 3rem;
  height: 2rem;
  color: #fff;
  float: right;
  line-height: 2rem;
  text-align: right;
}
nav span {
  width: 9rem;
  color: #fff;
  float: left;
  text-align: center;
  line-height: 2rem;
}
.nav_bg {
  width: 16rem;
  height: 2rem;
}

js部分主要是控制页面宽度，大小等。

$(function(){

var _width = $(window).width();
var _ziHao = 20 * (_width/320);
if(_width < 641){
$("#leekoh").css({"font-size":_ziHao + "px"})
}

})

斌道天下

关注

7
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
手机端自适应页面通用CSS及公用HTML写法

把页面的通用属性全部写出来。所有的手机端新建项目时候都可以直接拿这套代码快速搭建一个手机端框架。js中规定了页面最大宽度。为16rem。所以width：16rem；就等于width：100%；我一般喜欢把边距设置为0.5rem。所以页面一般宽度我写了15rem。rem写法好处是，自适应手机屏，手机屏不管是大小，都完美显示，不会错位。相比用百分比写法，rem写法计算相对简单。...
复制链接

扫一扫