移动端适配rem

第一种:根元素为100px,再按照750设计稿转化成vw单位,这样只要按照设计稿的单位/2即可。如果是小程序,不需要除以2。

html{
    font-size: 26.66vw;  //移动端适配 这里使用rem+vw方案 省去媒体查询
}

第二种:媒体查询 按照750设计稿,根元素是100px,兼容性比较好。

html {
    font-size: 625%; /*100 ÷ 16 × 100% = 625%*/
}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 843.75%; }
}

原文地址:https://www.cnblogs.com/linxue/p/9488668.html

时间: 2024-10-08 01:52:25

移动端适配rem的相关文章

移动端适配之rem 笔记

/*移动端适配 width|height|font-size = 视觉稿量出来的值 / 100rem;@lbl*/ @media screen and (max-width:359px) and (min-width:320px) { html,body{ font-size: 50px !important; } } @media screen and (max-width:374px) and (min-width:360px) { html,body{ font-size: 56.25px

移动端适配之REM

随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏幕呢? 答案就是rem. 俗话说 “授人以鱼不如授人以渔”,但今天我就反其道而行,就是授人以鱼的.因为要跟你说什么设备像素比.css像素.ppi等东西,估计你会晕的(主要是我也搞不懂).废话不多说,先上代码. 1 /*移动端适配 width|height|font-size = 视觉稿量出来的值 /

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

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

Rem实现移动端适配

移动端适配 web页面跑在手机端(h5页面) 跨平台 基于webview() 基于webkit 常见适配方法 pc端采用display:inline-block,让div盒子横着排 移动web:采用定高,宽度百分比,flex弹性布局,meDIA QUERY 媒体查询: 媒体查询 结合css,通过媒体类型(screen.print)和媒体参数(max-width) @media screen and (max-width: 320px){ /* css在屏幕跨度<=320px时这段样式生效 */

rem移动端适配方案

一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素字体大小为基准 二.js计算 为了避免造成因为动态设置<html>元素的font-size而造成页面抖动,一般这部分代码我们放在header底部去加载,并内联到html文档里面. <script> const oHtml = document.getElementsByTagName(

rem 移动端适配

rem移动端适配: 在移动端(手机端.Pad端),设备尺寸参差不齐.如果想要写完一套代码,能够在所有移动设备上都正常运行,那么采用原生的px单位来设置是不行的.举个例子:iPhone6的尺寸是375px,如果我们想要一个盒子是占据整个宽度的一半,那么会将这个盒子的宽度设置为187.5px,但是并不是所有手机的宽度都是375px,因此就会造成问题.这时候我们可以通过rem来解决这个问题. 什么是rem: em:当前元素字体大小相对于父标签的字体大小.比如: <div style="font-

移动端适配方案研究

初次接触移动端的时候,以为终于可以不用像pc那样考虑令人头疼的ie浏览器兼容问题,有强大的css3的帮助,可以随心所欲..可是后来才发现原来移动端各种层次不齐的终端更会让人抓耳挠腮,同样的页面在不同的手机上显示的完全不一样的效果,于是抛开功能,页面适配性也成了一个大的课题. 说到移动端,下面这一行代码大家一定不陌生: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-s

移动端适配知识梳理

了解移动端的知识 viewportviewport是用户网页的可视区域.手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分. 像素css中的像素只是一个抽象的单位,早期的手机屏幕像素密度较低,一个css像素等于一个物理像素.但是随着手机的屏幕像素密度越来越高,比如Retina,

移动端适配之雪碧图(sprite)背景图片定位

为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top,所以定位起来会比较准确.简单.但是在移动端就不一样了,各种手机的屏幕大小不一样,很难做到使用sprite图然后根据background-position来定位.所以普遍的做法都是使用单张图片,然后使用background-size: cover|100%|contain来控制背景图的大小.其实这样