js动态适配移动端font-size,单位：rem

比如：目前我手中有一张psd图，大小为640*1010，适配苹果5的手机。

方法步骤：

1.我采用font-size=10px为640*1010手机的初始像素大小； 1rem=10px；

此时psd上有一个文字的大小为20px，即当前我的字体大小用rem表示为：font-size:1rem （psd上的大小为html上大小的2倍，so首先要除以2才能得到正确的px,之后换算rem再次除以2就ok了）

适配各种手机的rem单位：

2.获取我当前使用手机的width: var windowWidth=$(this).innerWidth();

3.比例换算获取当前使用手机的px: windowWidth/M= 320/10 ========= (此时得到M值)

4.将上部得到的x值赋值到当前使用手机页面的html标签里： <html style="font-size:Mpx">

时间： 2024-10-10 08:31:25

js动态适配移动端font-size,单位：rem的相关文章

浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应

随着3G的普及,越来越多的人使用手机上网.移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?本篇文章将讲述自适应网页设计的概念和方法,使网页开发人员维护同一个网页代码,即可使网站在多种设备上具有更好的阅读体验.本文详细介绍了自适应网页的实现方法,希望能给迷惑的你带来帮助. 一. 在HTML的头部加入meta标签在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,

js动态计算移动端rem

在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: 1 html { 2 font-size : 20px; 3 } 4 @media only screen and (min-width: 401px){ 5 html { 6 font-size: 25px !important; 7 } 8 } 9 @media only screen and (min-width: 428px){ 10 html {

单位rem 触屏适配总结

来源:http://www.cnblogs.com/dtdxrk/p/4644703.html 先了解一下rem css3 中引入了新的长度单位,rem. 官方定义 font size of the root element rem:rem和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能. 兼容性:IE9+,Firefox.Ch

九、响应式发：rem和less（适配移动端）

一.响应式开发响应式开发优先适配移动端又兼容到pc端官网:https://less.bootcss.com/usage/ 教程:https://www.w3cschool.cn/less/ rem和em:https://blog.csdn.net/u010132177/article/details/103725945 参考:https://www.jianshu.com/p/58a061c6e9af 1.1安装less依赖 cnpm install less less-loader --s

js动态生成数据列表

我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js来动态生成表格. 首先我们需要先写好页面的样式. html部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; chars

让 jQuery UI draggable 适配移动端

背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是mousedown.mousemove.mouseup来描述拖拽和鼠标的点击事件,而在移动端里,肯定要新添touchstart.touchmove.touchend来描述拖拽和手指的点击事件实现 demo: <!DOCTYPE html> <html lang="en"

JS动态生成Input文本框并获取文本框值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Conte

2017-05-17 js动态生成轮播图小圆点

从今天开始,把自己做的笔记转移到博客园: 今晚复习了一下动态创建轮播图小圆点做了一下小的笔记: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>2017-05-17 js动态生成轮播图小圆点</title> 6  7

移动端单位 rem

rem是指相对于根元素的字体大小的单位(相对单位) rem和em的区别,em相对于父元素的字体大小的单位.rem相对于根元素html字体大小计算, px是一个绝对的单位. 所以rem可以实现强大的屏幕适配布局例如: html{ font-size:20px; } .btn{ width:6rem; height:3rem; } //<div class='btn'></btn>那么.btn的宽度为120px;高度为60px; 所以在做移动端适配的时候就要根据不同分辨率设置font