webapp思路和rem适配极其viewport

webapp在制作时候,页面上要加入viewport标签,用来进行适配;

viewport的meta标签,指的是在移动端显示的时候,viewport是多大?移动端的浏览器是屏幕宽,viewport一般(手机浏览器)默认的是960px左右,就把页面压缩到

960px显示,所以是比手机屏幕宽的哟.等比放小,所以,为了显示的好看,要设定viewport为屏幕宽,就是:如此标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

设定width就是设备的宽度,然后就将页面大小缩放这么大显示.所以,在很多时候,在webapp页面的时候,我们直接在pc端测试就行,直接设计640px的宽度来做,然后html和body 的

宽度设为100%;主要容器宽度就是640px,然后,适配在手机端的时候,就会将其略压缩显示在手机的viewport上,大概样子差不多,而且,在加上rem的适配,一般没问题的.

而rem适配,是根据html这个根元素来进行的,1rem为这个根元素的字体大小.若将其设为10px,那么1rem就是10px,之后的所有都用rem来表示,然后,在用js或者是css的media query来实现不同屏幕大小时候不容的html的字体,然后,其余所有部分,都会跟随这成比例改变了的.就是这个原理的.

讲的,实际上也就是两点:1,viewport的作用;2,rem进行适配,当然也有用100%比的,不过out了

列出测试成功的rem适配的css和js代码:

css:

@media only screen and (max-width: 320px){html{font-size: 9px;} }
@media only screen and (min-width: 320px) and (max-width: 352px){html{font-size: 10px;} }
@media only screen and (min-width: 352px) and (max-width: 384px){html{font-size: 11px;} }
@media only screen and (min-width: 384px) and (max-width: 416px){html{font-size: 12px;} }
@media only screen and (min-width: 416px) and (max-width: 448px){html{font-size: 13px;} }
@media only screen and (min-width: 448px) and (max-width: 480px){html{font-size: 14px;} }
@media only screen and (min-width: 480px) and (max-width: 512px){html{font-size: 15px;} }
@media only screen and (min-width: 512px) and (max-width: 544px){html{font-size: 16px;} }
@media only screen and (min-width: 544px) and (max-width: 576px){html{font-size: 17px;} }
@media only screen and (min-width: 576px) and (max-width: 608px){html{font-size: 18px;} }
@media only screen and (min-width: 608px) and (max-width: 640px){html{font-size: 19px;} }
@media only screen and (min-width: 640px){html{font-size: 20px;} }

js:

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>640){
    clientWidth = 640;
}
//这行代码有诈,讲10改成更小的数字,比如5,就没有反应了...字大小可以,但
//div的宽高就不变了也是醉了
docEl.style.fontSize = 10 * (clientWidth / 320) + ‘px‘;

};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);
时间: 2024-10-13 21:47:17

webapp思路和rem适配极其viewport的相关文章

移动端使用rem适配及相关问题

移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案很受欢迎. rem定义及浏览器支持情况 rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其

移动端适配(3)---rem适配

rem适配 <meta name="viewport"  content="width=device-width,user-scalable=no"/> <script> (function(){ var html=document.documentElement; var hWidth=html.getBoundingClientRect().width; html.style.fontSize=hWidth/16+"px&quo

移动端最强适配(rem适配之px2rem)&amp;&amp; 移动端结合Vuex实现简单loading加载效果

一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 viewport --> 百分比 --> rem --> rem的升级版px2rem可谓是一把鼻涕一把泪啊 ,在px2rem之前总觉得之前的不够完美或者麻烦: 进入正题: 首先 px2rem 也是基于 rem  适配的,但是他的好用之处在于灵活.简便.高效不用我们自己去换算.px2rem-load

em与rem之间的区别以及移动设备中的rem适配方案

em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE html> <html lang="en" style="font-size: 50px"> <head> <meta charset="UTF-8"> <title>Document</tit

H5C3时钟实例(rem适配)

1.原理分析和效果图 先上效果图: 屏幕适配上使用rem适配,假设用户的手机屏幕最下宽度是375px,而谷歌浏览器最小的字体大小为12px,所以我以375px为标准尺寸进行rem适配,即375px的屏幕设置html标签字体大小为12px,随着屏幕宽度增大,1rem也随之增大 表盘使用的是圆角,使之展现为正圆的效果.刻度条其实是几条div通过rotate产生的,但是中间用一个遮罩盖住了(粉色区域) 页面初始化后开启定时器,每秒钟获取一次当前时间,解析时分秒,计算相应的角度值,将其应用到相关元素上

0082 rem适配方案:less+rem+媒体查询、flexible.js+rem

1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备. 2.使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化,元素尺寸也会发生变化,从而达到等比缩放的适配. 技术方案: 1.less+rem+媒体查询 2.flexible.js+rem 总结: 两种方案现在都存在,方案2 更简单,现阶段无需了解里面的js代码. rem实际开发适配方案1 ①假设设计稿是750px ②假设我们把整个屏幕划分为15等份(划分标准

移动APP中rem适配

将js中的代码引入自己html页面中,页面内的所有有关尺寸大小的设定都可以用rem来代替,如用rem代替px的使用,可以做到屏幕大内容按比例放大,是所有内容哦,若果你项目中所有内容都使用rem. <!doctype html><html><head><meta charset="utf-8"><title>移动APP中rem适配-jq22.com</title><script src="http:/

rem适配

//REM适配new function() { var _self = this; _self.width = 640; // 设置默认最大宽度 _self.fontSize = 100; // 默认字体大小 _self.widthProportion = function() { var p = (document.body && document.body.clientWidth || document.getElementsByTagName("html")[0]

webapp新体验Rem实现移动端网页适配详解资源

本来想写一篇,webapp使用Rem的问题,查了一下相关rem的介绍之后,发现很多平台已经解释的很清楚了,图文并茂,于是我便想将其解释资源整理一些,方便以后自己查阅. 腾讯ISUX:web app变革之rem(解释的最精辟了) 大漠博客:CSS3的REM设置字体大小 小黑成长录:关于webapp中的文字单位的一些捣腾 前端观察站:px em rem在WEB前端开发中的区别 最后分享一段淘宝手机屏幕尺寸判断改变字体大小的js: !function(x) { function w() { var a