一、元素大小有两种写法

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>

改变字体大小实现自适应之js方案A的更多相关文章

  1. rem布局和使用js rem动态改变字体大小，自适应

    解决rem文字动态改变字体大小: <script> console.log(window.devicePixelRatio); var iScale = 1; iScale = iScal ...

  2. 使用js rem动态改变字体大小，自适应

    <html> <head> <meta charset="utf-8"> <script> console.log(window.d ...

  3. pycharm设置用滑轮改变字体大小

    在电脑第一次安装pycharm之后,发现每次调整代码界面的字体,总是需要到setting里面调整,这样非常不方便,特别是对于代码量很多的时候,我们有时候需要把目光聚焦到某一句代码,这个时候就需要放大, ...

  4. javascript实现一行文字随不同设备自适应改变字体大小至字数完全展示

    产品提了一个小需求,希望一行能展示用户输入的所有文字,因为最多限制为25字符,但是如果夹杂英文/韩文/日文等,即使字符数是一样的,但是展示的长度不一样,则有些title标题会被截断. 效果如图 前提是 ...

  5. uiwebview 加载html时字体变小 加载前或加载后改变字体大小

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #6122ae } p.p2 { margin: 0.0px 0. ...

  6. Eclipse 改变字体大小，设置背景色

    Eclipse背景颜色修改: 操作界面默认颜色为白色.对于我们长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以我经常会改变workspace的背景色,使眼睛舒服一些.设置方法如下: 1.打开win ...

  7. vs mfc 静态文本 改变字体大小

    VC的对话框字体设置对所有控件都有效,你不能单独地改变某个静态文本的字体.对于你的问题,需要首先用CreateFont来建立一个字体对象,然后调用控件的SetFont,就可以了. 例子: 1.改静态文 ...

  8. eclipse 改变字体大小

  9. jquery之css（）改变字体大小，颜色，背景色

    转: <script type="text/javascript"> $(document).ready(function() {         $("#f ...

随机推荐

  1. kindedit编辑器和xxs攻击防护（BeautifulSoup）的简单使用

    一.kindedit编辑器 就是上面这样的编辑输入文本的一个编辑器 这也是一个插件.那么怎么用呢? 1.下载:百度kindedit 2.引入: <script src="/static ...

  2. PyCharm里面执行代码没问题，Jenkins执行时找不到第三方库

    在PyCharm里面代码执行没问题 本地cmd执行也没问题 Jenkins执行时报错 原因是第三方库是用PyCharm安装的,后来在Jenkins服务器上用pip装好第三方库后,就可以执行了 再执行 ...

  3. Python变量的作用域

    局部变量 局部变量是指在函数内部定义并使用的变量,他只在函数内部有效.即函数内部的名字只在函数运行时才会创建,在函数运行之前或者运行完毕之后,所有的名字就都不存在了.所以,如果在函数外部使用函数内部定 ...

  4. 史上最简单的SpringCloud教程 | 第七篇: 高可用的分布式配置中心(Spring Cloud Config)

    上一篇文章讲述了一个服务如何从配置中心读取文件,配置中心如何从远程git读取配置文件,当服务实例很多时,都从配置中心读取文件,这时可以考虑将配置中心做成一个微服务,将其集群化,从而达到高可用,架构图如 ...

  5. rpm 命令使用 和 lsof -p 1406 使用

    #安装RPM -v 显示详细信息 -h 显示进度 -i 安装 -U 升级 -q 查询 -ql 查看rpm 包装的文件 - qf 查看命令属于哪个RPM 包 -qi 查看RPM包的详细信息 [root@ ...

  6. 【C#】wpf中的xmlns命名空间为什么是一个网址，代表了什么意思（转载）

    原文:https://blog.csdn.net/catshitone/article/details/71213371 新建一个wpf的项目,我们先来看下它默认的命名空间都是哪些? 可以看到xmln ...

  7. 开始写博客，学习Linq（1）

    摘自<linq实战>原文: 软件很简单.它可以归结为两件事情:代码和数据. 开发软件却并非那么简单,其中很重要的一项任务就是编写处理数据的代码. 无论选择了哪种语言,在程序开发得某个时候你 ...

  8. [转] babel的使用

    一.配置文件.babelrc .babelrc 文件存放在项目的根目录下. { "presets": [], "plugins": [] } presets 字 ...

  9. java中String和StringBuffer的区别

    前言 String和StringBuffer本质上都是修饰字符串的只是含义不同 StringBuffer叫做字符串缓冲区 首先看下string类的例子 public class Work1 { pub ...

  10. spring security实现动态配置url权限的两种方法

    缘起 标准的RABC, 权限需要支持动态配置,spring security默认是在代码里约定好权限,真实的业务场景通常需要可以支持动态配置角色访问权限,即在运行时去配置url对应的访问角色. 基于s ...