• 站长首页
  • 源码下载
    HTML源码 ASP源码 PHP源码 .NET源码 其他源码
  • 网站模板
    织梦模板 ShopEx模板 EcShop模板 Discuz模板 帝国模板
  • 站长素材
    字体下载 高清图片 网页模板 PSD素材 矢量素材
  • 网页特效
    返回顶部 图片代码 鼠标特效 菜单导航 HTML5特效
  • 站长资讯
    网站运营 建站经验 搜索优化 互联网
登陆| 注册
快捷导航

源码下载

HTML源码 ASP源码 PHP源码 .NET源码

网站模板

织梦模板 ShopEx模板 EcShop模板 Discuz模板

站长素材

字体下载 高清图片 网页模板 PSD素材

网页特效

返回顶部 图片代码 鼠标特效 菜单导航

站长资讯

网站运营 建站经验 搜索优化 互联网

软件下载

电脑软件 安卓软件 苹果软件

建站工具

WEB服务器 网页设计 FTP工具 建站辅助

建站教程

服务器教程 CMS教程 脚本之家
80站长网

小程序微擎商城响应式企业图片响应as帝国小说

发布教程
  • 站长首页

  • 源码下载

  • 网站模板

  • 站长素材

  • 网页特效

  • 站长资讯

  • 软件下载

  • 建站工具

  • 建站教程

  • 程序插件

  • 网站基础

  • 帮助中心

HTML源码 ASP源码 PHP源码 .NET源码 其他源码 微擎微赞模块 VIP源码 淘宝客网站源码

织梦模板 ShopEx模板 EcShop模板 Discuz模板 帝国模板

字体下载 高清图片 网页模板 PSD素材 矢量素材 免抠素材 PPT模板

返回顶部 图片代码 鼠标特效 菜单导航 HTML5特效 css3特效 日期时间 选项卡_滑动门 HTML5小游戏 动画效果 表单按钮 jquery特效

网站运营 建站经验 搜索优化 互联网

电脑软件 安卓软件 苹果软件

WEB服务器 网页设计 FTP工具 建站辅助

服务器教程 CMS教程 脚本之家

shopex插件 Discuz!插件 pjblog插件 wordpress插件 dedecms插件 ecshop插件

HTML教程 DIV&CSS Javascript/Ajax Dreamweaver XHTML教程 W3C教程

关于我们 联系我们 广告服务 投稿指南 友情链接 积分金币规则 加入VIP会员

当前位置:网站首页 > 网站基础 > HTML教程 > 移动web端屏幕适配(rem)

移动web端屏幕适配(rem)

时间:2018-08-06 23:11 来源:未知 浏览: 次
前言

最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用。

接下来,把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来。

rem 介绍

rem 表示根元素(<html>)的 font-size 的大小。即如果根元素的 font-size 大小为 14px,则 1rem = 14px

rem 适配移动 web 端

适配效果

在不同尺寸的屏幕下,同一个元素的大小看起来不是一样大的,但是它们所占屏幕宽度的比例是一样的。

代码
   
// 在 html 文件的 head 标签中
<script type="text/javascript">
  (function(){
    var html = document.documentElement;
    // 获取屏幕宽度(px)
    var hWidth = html.getBoundingClientRect().width;
    // 设置 html 标签的 font-size 大小为 hWidth/15
    html.style.fontSize = hWidth/15 + 'px';
  })()
</script>
   
// 在 less 中
/* 定义变量@r:750/15 */
@r:50rem;
div {
  width: 100/@r;
  height: 200/@r;
}

javascript 代码

首先,我们将屏幕的 1/15 大小(px)复制给 html 标签的 font-size 属性。此时,在任何尺寸的屏幕上,屏幕尺寸(px)的 1/15 px 都等于 1rem 的大小。即:在任何尺寸的屏幕上,只要给元素设置值相同的 rem,则在所有尺寸的屏幕上该元素所占屏幕宽度的比例是一样的,所占比例一样,就适配了所有尺寸的屏幕。

less 代码

现在只需要将设计稿中元素的 px 单位转换为 rem 单位。

所以,这个时候,我们可以把设计稿也当成一个具有一定尺寸的手机屏幕。
在我这个例子中,设计稿的宽度为 750px。

所以,750/15 = 50px,即在设计稿这样尺寸的手机屏幕中,1rem = 50px。

然后,在 less 代码中,我们定义一个变量 @r。

量得 div 的宽度为 100px,因为在设计稿这样尺寸的屏幕中,1rem = 50px,所以该 div 的 rem 的值为:100/50 rem,即 100/@r。

量得 div 的高度为 200px,因为在设计稿这样尺寸的屏幕中,1rem = 50px,所以该 div 的 rem 的值为:200/50 rem,即 200/@r

    好评
    (0)
    0%
    差评
    (0)
    0%
    (作者:80站长网)   /   责任编辑:80站长网
    • 上一篇:详解前端在html页面之间传递参数的方法
    • 下一篇:HTML中的<meta>标签的使用详解
    • 收藏
    • 打印

    相关模板

  • 响应式摄影类企业网站源码dedecms织梦模板

    响应式摄影类企业网站织梦模板 该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非常有利的,随便挂点联盟广告都能养活网站。 本套织...

  • 2017-05-06 12:36:20
  • 响应式数字防盗视频监控类网站源码,HTML5智能监控设备网站织梦模板

    响应式数字防盗视频监控类网站织梦模板 HTML5智能监控设备网站源码下载 这款模板使用范围极广,不仅仅局限于一类型的企业,你只需要把图片和产品内容更换下,适...

  • 2018-09-04 09:01:53
  • 营销型大气机械设备网站源码|机电营销类企业网站织梦模板

    营销型大气机械设备网站源码 机电营销类企业网站织梦模板 该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非常有利的,随便挂点联盟...

  • 2017-04-15 17:00:05
  • 织梦dedecms响应式鲜花花店网站模板(自适应手机移动端)

    织梦最新内核开发的模板,该模板属于HTML5响应式、鲜花、花店销售展示类企业使用,一款适用性很强的模板,基本可以适合各行业的企业网站! 响应式自适应各种移...

  • 2019-01-15 10:37:45 织梦鲜花网站模板 织梦花店网站模板
  • 响应式蛋糕甜点类网站源码,HTML5蛋糕食品网站织梦模板

    响应式蛋糕甜点类网站织梦模板 HTML5蛋糕食品网站源码下载 这款模板使用范围极广,不仅仅局限于一类型的企业,你只需要把图片和产品内容更换下,适用于任何行业...

  • 2018-10-09 10:40:05
  • 织梦仿uehtml响应式素材模板类内容分享源码 测试完整无错 兼容主流浏览器

    本模板基于 DEDECms 5.7 UTF-8设计,需要GBK版本的请自己转换。 ★模板安装方法★ 1、下载最新的织梦dedecms5.7 UTF-8版本。 下载网址:http://www.dedecms.com/products/dedecms/downloa...

  • 2018-05-06 12:29:05
  • html5手机自适应食品类企业网站织梦模板

    模板名称: html5手机自适应食品类企业网站 织梦模板 页面简洁简单,容易管理,DEDE5.5内核以上都可以使用;附带测试数据! 绿色食品,绿色环保、农业农林类企业使...

  • 2017-12-12 22:02:12
  • 响应式玻璃制品厂类网站源码 HTML5高端大气的汽车玻璃网站织梦模板

    响应式玻璃制品厂类网站 织梦模板 HTML5高端大气的汽车玻璃 网站源码 下载 该模板是非常容易存活的,这样的网站很容易吸引访客点击,提升ip流量和pv是非常有利的,...

  • 2018-06-14 09:15:18

    教程列表

    • HTML教程
    • DIV&CSS
    • Javascript/Ajax
    • Dreamweaver
    • XHTML教程
    • W3C教程

    热门教程排行

    • 1 HTML基础教程入门之HTML样式
    • 2 HTML基础知识_编辑器
    • 3 HTML基础教程入门之|HTML标题
    • 4 HTML基础知识_HTML简介
    • 5 HTML基础知识之HTML元素
    • 6 HTML基础教程入门之HTML段落
    • 7 HTML基础教程入门之HTML属性
    • 8 Html基础知识_HTML常用的标签元素
    • 9
    • 10 详解前端在html页面之间传递参数的方法

    教程标签

      WMCMS ip6 夏季清仓促销 智慧农场小程序 牛皮纸袋 中秋节促销海报 几何 睡衣美女 微信大屏摇一摇 时尚海报 网站 化学企业 会员用户组购买 小清新写真 MM131 蝉知企业门户系统 猫咪 文艺晚会 分红小程序 2018
    返回
    顶部
    联系我们 投稿指南 专家专栏 热门标签 广告投放 友情链接

    备案号: 辽ICP备16013735号

    Copyright © 2016-2018 80站长网 版权所有

    ×