您的位置：首页 > Web前端 > JavaScript

改变字体大小实现自适应之js方案A

2016-03-27 13:01 801 查看

一、元素大小有两种写法

1、写结果：设计师给的移动端页面sketch设计稿一般是750px宽度，在sublime编辑器里，设置cssrem或rem-unit插件为56px的字体大小。做页面时，设计稿是多少px，就写多少px，sublime会把px自动转换成rem，省略口算或心算。

2、写公式

A、如果设计师给尺寸为375px的sketch设计图，某DIV宽120px，就可以写120rem/28
B、如果设计师给尺寸为750px的psd设计图，某DIV宽120px，就可以写120rem/56

二、移动端自适应要点

1、<!DOCTYPE html>
2、<meta name="viewport"content="initial-scale=1, maximum-scale= 1, minimum-scale=1, user-scalable=no">
3、多用100%，rem。px较稳定和精确，em是一个相对于父元素字体的大小，rem是相对于根元素字体的大小。
4、fixRem，js引入。非常重要，可以省略媒体查询，不用设置max-width等样式，非常方便。通常以iphone6为标准，375px宽度，28px字体大小。

三、举个例子

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport"content="initial-scale=1, maximum-scale= 1, minimum-scale=1, user-scalable=no">
<title>改变字体大小做自适应页面</title>
<style type="text/css">
body, button, input, select, textarea {
font-family: Helvetica;
font-size: 12px;
border: 0;
outline: 0;
}
body, ul, li {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
.mymenu {
position: relative;
overflow: hidden;
border-bottom: 1px solid #e81b75;
-moz-box-shadow: 0 0.25rem 0.25rem #c6c5c5;
-webkit-box-shadow: 0 0.25rem 0.25rem #c6c5c5;
box-shadow: 0 0.25rem 0.25rem #c6c5c5;
}
.mymenu li {
float: left;
box-sizing: border-box;
width: 25%;
text-align: center;
background-color: #f55097;
border-right: 1px solid #f5b9c6;
}
.mymenu li a {
display: inline-block;
width: 100%;
height: 1.607143rem;
line-height: 1.607143rem;
font-size: 0.5rem;
color: #fff;
text-decoration: none;
}
</style>
</head>

<body>
<ul class="mymenu">
<li><a href="javascript:;">新年快乐</a></li>
<li><a href="javascript:;">羊年大吉</a></li>
<li><a href="javascript:;">万事如意</a></li>
<li><a href="javascript:;">心想事成</a></li>
</ul>
<script>
window.onload=function() {
function fixRem() {
var windowWidth = document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth;
// windowWidth = windowWidth > 750 ? 750 : windowWidth;
var rootSize = 28 * (windowWidth / 375);
var htmlNode = document.getElementsByTagName("html")[0];
htmlNode.style.fontSize = rootSize + 'px';
}
fixRem();
window.addEventListener('resize', fixRem, false);
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航