移动端屏幕适配问题

为了做移动适配,css3出了一个新单位rem,rem就是相对于根元素<html>的font-size来做计算,根目录一般用20px(一是方便计算,二是谷歌浏览器不支持12px以下的字体);

html{font-size:20px},默认为20px;

@media only screen and (max-width: 1220px) and (min-width: 992px){
html{
  font-size: 50px;
 }
}

意思就是屏幕的尺寸在992px和1220px范围内html的字体大小就采用50px;根据实际情况举一反三列出主流的屏幕尺寸就可以,如果觉得不够严谨就可以用js动态设置html的字体大小;

<script>

  document.getElementsByTagName(‘html‘)[0].style.fontSize=window.innerWidth/10+‘px‘;

</script>

10也可以换做其他,取10是为了方便计算;

如果觉得单位换算麻烦,可以采用less或者sass等预处理器去完成;当然,单位方面也可以采用vw或vh去进行计算,1vw就是屏幕宽度的1%;1vh就是屏幕高度的1%;

布局方面可以用flex布局;

移动开发常常出现的几个问题及解决办法:

一:高清图片处理

img       100px *100px

高清屏     200dp*200dp 渲染模糊,dpr=2的情况下

解决办法   50px *50px 得到正确结果

二:一像素边框

同样是高清屏下的问题,根本原因是1px使用2dp来渲染

border:0.5px 这种写法仅在ios8可以起作用;

解决方案:

.sidebar .folder li{position:relative}

.folder li+li:before{

  position:absolute;

  top:-1px;

  left:0;

  content:‘‘;

  width:100%;

  height:1px;

  border-top:1px solid #ddd;

  -webkit-transform:scaleY(0.5);

}

时间: 2024-10-23 18:44:36

移动端屏幕适配问题的相关文章

移动端屏幕适配原理以及方法讲解

序言: 今天周日,我正坐在黄埔区图书馆,思索着关于移动端屏幕适配的问题.作为一名年纪轻轻的前端马蓉,不,是码农,移动端屏幕适配的方案的帖子没读过100篇吧,也读过几十篇了.可是今天我又在思考这个问题了,因为下周我有个关于移动端适配的演讲.人生这么短暂,我却把有限的时间奉献到了无限的前端道路上. 根据我不(cong)太(ming)灵(jue)活(ding)的大脑的努力思考.我发现现阶段比较流行移动端适配原理只有一个--就是对元素进行放大和缩小,具体到执行的时候方法有两个(求不打脸). 1个是网页大

移动端屏幕适配方案

本文来源:http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=201811994&idx=1&sn=1c3bae60e2fe13d3bc3aeecaa6a4ef00&scene=23&srcid=abqLbfgvESx4DGNysdG8#rd pc上的网站在移动端上怎么办? 1:如果把移动端的可视区域(320-768)的话,大部分网站都会因为太窄而显示错乱: 2:所以浏览器默认把viewport设置为一个较宽的值

前端关于移动端屏幕适配

1.先谈一下几个概念 像素是度量的单位,可以理解为点 1.css像素 html中度量的单位 用px来计算,在pc中往往 1 css px = 1 物理像素 在不同设备中1css像素对应不同的设备像素(物理像素) 例如:iphone3分辨率是320*480 即 css 1px = 1个物理像素:iphone4 分辨率640x960但屏幕尺寸没有改变,意味着同一块区域像素多了1倍 即 css 1px =2个物理像素: 2.物理像素 表示每英寸所拥有的像素数目,数值越高,代表屏幕能够以更高的密度来显示

h5移动端屏幕适配

1.rem <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&

移动端屏幕适配解决方案

因原在做移动端适配过程中,一直都是应用淘宝的flexible高清方案解决,也没有认真的去研究过源码.这几天又看到一些普通的适配方案,于是把两者源码放在一起比较,发现高清方案是通过动态的获取了当前设备的dpr值,然后根据dpr值的大小来设定手机的视口的缩放比例,从而实现高清.比如:dpr=2时,设定initial-scale = 0.5 ;  dpr=3时 ,设定initial-scale = 0.333 : 一.手机端viewport详解 <meta name="viewport"

谈谈移动端屏幕适配的几种方法

移动端web开发相对于PC端web开发,我们可以庆幸不用兼容那么多浏览器了,但是随之而来的却是各种屏幕尺寸的适配,个人觉得,比PC端还要费精力.在使用了腾讯优测进行软件测试后,问题得到了有效解决. 响应式布局 简而言之,就是页面元素的位置随着屏幕尺寸的变化而变化,通常会用百分比来定位,而在设计上需要预留一些可被“压缩”的空间. 如上图,其实就相当于页面被压矮了. Cover布局 就跟background-size的cover属性一样,保持页面的宽高比,取宽或高之中的较小者占满屏幕,超出的内容会被

web移动端屏幕适配方案

因为手机屏幕的分辨率大小不一 ,如果使用传统的静态布局,把每个元素的宽高样式写死,在不同的屏幕中就有各种各样的显示效果.这显然不是我们想要的结果.我们需要的是根据屏幕分辨率的不同,来适配不同的样式大小.使不同的手机分辨率下都有相同的样式布局 1.rem适配 1rem就是html标签font-size的大小,在rem适配方案中,我们以rem作为基值来设定元素的大小.1rem单位越大,元素的大小也就越大,1rem单位越小,元素的大小也就越小 实现方法:通过js获取屏幕的分辨率来动态设置1rem的大小

移动端屏幕适配viewport

一般,自适应移动端加这个语句即可 <meta name="viewport" content="width=device-width">但是,不知道为什么加了这个语句还是没用,查了查可能跟下面这几个元素有关系,所以可以尝试这样子加: <script> var viewportContent = ''; if (window.devicePixelRatio = 1) { viewportContent = 'width=device-widt

vue 移动端屏幕适配 使用rem

要想移动端适配 并使用 rem  您需要先看这篇文章,配置好less ?? 在vue 中使用 less,就可以使用rem了 如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招. postcss-pxtorem:转换px为rem的插件 安装 postcss-pxtorem npm install postcss-pxtorem --save 新建rem.js文件 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前