精华内容
下载资源
问答
  • PC、移动端自适应等比缩放布局方案
  •  《CSS3-flex》弹性布局   方案一: 1.为每个不同尺寸设备定义一套的css样式 2.使用media ,动态加载不同的css外联样式   (orientation:portrait)" ;href="stylea.css"> ...

           移动设备网页,怎么才能做一套样式,可以适应不同分辨率设备?

           知识点:《CSS3-rem》相对于根元素字体大小的单位

                         《CSS3-media》在Html内容不变的情况,根据媒体设备不同,浏览器窗口尺寸不同,使用不同的CSS样式

                         《CSS3-flex》弹性布局

           


    方案一:

    1.为每个不同尺寸设备定义一套的css样式

    2.使用media ,动态加载不同的css外联样式

     

    <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" ;href="stylea.css">
    
    <link rel="stylesheet" type="text/css" media="screen and (orientation:landscape)" ;href="styleb.css">

    方案二:

    1.为每个不同尺寸设备定义一套的css样式

    2.使用@media ,动态加载不同的css内部样式



    @media screen and (max-device-width:960px){
        body{background:red;}
    }
    
    @media screen and (min-width:960px){ 
        body{background:orange;}
    }

    方案三:

    1.利用rem等比例缩放特点,使用rem单位

    2.为不同尺寸设备指定html的font-size大小,其他元素大小根据html的font-size进行缩放


        /* for 1080+ px width screen */
        @media only screen and (min-device-width: 1080px), only screen and (min-width: 1080px) {html, body {font-size: 170px}}
    
        /* for 1080 px width screen */
        @media only screen and (max-device-width: 1080px), only screen and (max-width: 1080px) {html, body {font-size: 144px}}
    
        /* for 800 px width screen */
        @media only screen and (max-device-width: 800px), only screen and (max-width: 800px) {html, body {font-size: 107px}}
    
        /* for 720 px width screen */
        @media only screen and (max-device-width: 720px), only screen and (max-width: 720px) {html, body {font-size: 96px}}
    
        /* for 640 px width screen */
        @media only screen and (max-device-width: 640px), only screen and (max-width: 640px) {html, body {font-size: 85px}}
    
        /* for 540 px width screen */
        @media only screen and (max-device-width: 540px), only screen and (max-width: 540px) {html, body {font-size: 72px}}
    
        /* for 480 px width screen */
        @media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {html, body {font-size: 64px}}
    
        /* for 414 px width screen */
        @media only screen and (max-width: 414px), only screen and (max-device-width: 414px) {html, body {font-size: 55.2px}}
    
        /* for 375 px width screen */
        @media only screen and (max-width: 375px), only screen and (max-device-width: 375px) {html, body {font-size: 50px}}
    
        /* for 320 px width screen */
        @media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {html, body {font-size: 42.7px}}


    方案三项目实践:


    1643676d6dd866d79b5e31b1b12d489346b4d6f37fb33557f94e3e6966a6726fcb6d264cdb73b4ed





    展开全文
  • 生成的viewport告诉浏览器网页的布局视口使用 640px,然后把页面缩放成50%,这是绝对的等比例缩放。图片、文字等等所有元素都被缩放在手机屏幕中。 这个gif图说明了一切: rem做宽度,viewport缩放 demo ...

      rem的定义,the font size of the root element,即以根节点的字体大小作为基准值进行长度计算。网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。

      视口(viewport)设置:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

      在html上根据不同分辨率设置不停font-size,通过js计算出来。

      页面里除了font-size之外的其他css尺寸都使用了rem作为单位。

      正文的font-size需要额外的媒介查询,并且不使用rem。

      要搞懂移动端的适配,首先要高明白像素和视口。

      其实存在两种像素:

      1. 设备像素

      屏幕的物理像素,任何设备屏幕的物理像素的数量都是固定不变的,单位是pt

      2. CSS像素

      在CSS、JS中使用的一个抽象的概念,单位是 px

    顺便说下,CSS像素也可以称为设备独立像素(device-independent pixels),简称为dips,单位是dp

      那么,我们现在再来说说一个元素 width:200px 。这个元素跨越了200个CSS像素,200个CSS像素相当于多少个设备像素取决于两个条件:

    • 页面是否缩放
    • 屏幕是否为高密度

      

      先梳理一下手机硬件之间的关系,注意这里使用的都是物理像素。

      以 iPhone5 为例,我们已知的是:

    1. 分辨率:1136pt x 640pt
      指屏幕上垂直有 1136 个物理像素,水平有 640 个物理像素
    2. 屏幕尺寸: 4英寸
      注意英寸是长度单位,不是面积单位。4英寸指的是屏幕对角线的长度。
    3. 屏幕像素密度:326dpi
      屏幕像素密度(Pibel Per Inch)简称 ppi ,单位是 dpi(dot per inch)。这里指屏幕水平或垂直每英寸有326个物理像素。原则上来说,ppi越高越好,因为图像会更加细腻清晰。

      ppi 是可以通过 分辨率 和 屏幕尺寸 计算得到的:ppi

      视口

      桌面浏览器中,浏览器窗口就是约束你的CSS布局视口(又称初始包含块)。它是所有CSS百分比宽度推算的根源,它的作用是给CSS布局限制了一个最大宽度,视口的宽度和浏览器窗口宽度一致。

      但是在移动端,情况就很复杂了。

      布局视口

      一个没有为移动端做优化的网页,会尽可能缩小网页让用户看到所有东西。

      浏览器厂商为了让用户在小屏幕下网页也能够显示地很好,所以把视口宽度设置地很大,一般在 768px ~ 1024px 之间,最常见的宽度是 980px。

      所以,在手机上,视口与移动端浏览器屏幕宽度不再相关联,是完全独立的,这个浏览器厂商定的视口被称为布局视口。

      布局视口我们是看不见的,只知道网页的最大宽度是 980px ,并且被缩放在了屏幕内。

      可以这样设置布局视口的宽度:<meta name="viewport" content="width=640">

      媒体查询与布局视口

      700px 指的是布局视口的宽度

      @media (min-width: 700px){
          ...
      }
      document.documentElement.clientWidth/Height返回布局视口的尺寸

      视觉视口

      视觉视口是用户正在看到的网页的区域,大小是屏幕中CSS像素的数量。

      window.innerWidth/Height返回视觉视口的尺寸

      理想视口

      布局视口明显对用户是不友好的,完全忽略了手机本身的尺寸。所以苹果引入了理想视口的概念,它是对设备来说最理想的布局视口尺寸。理想视口中的网页用户最理想的宽度,用户进入页面的时候不需要缩放。

      现在讨论所谓的『最理想的宽度』到底是多少?其实,如果我们把布局视口的宽度改成屏幕的宽度不就不用缩放了么。可以这样设置告诉浏览器使用它的理想视口:

      <meta name="viewport" content="width=device-width">

    定义理想视口是浏览器的事情,并不能简单地认为是开发者定义的,开发者只能使用。

      screen.width/height返回理想视口的尺寸,有严重的兼容性问题---可能返回两种值:

    1. 理想视口的尺寸(下载浏览器)
    2. 屏幕的设备像素尺寸(内置浏览器)
      缩放

      缩放与设备像素、CSS像素的关系

        缩放是在放大或缩小CSS像素,比如一个宽度为 200px 的元素放大,还是200个CSS像素。但是因为这些CSS像素被放大了,所以CSS像素也就跨越了更多的设备像素。缩小则相反。

       缩放与视口

      缩放会影响视觉视口的尺寸

      页面被用户放大,视觉视口内CSS像素数量减少;被用户缩小,视觉视口内CSS像素数量增多就行了。这个道理应该是不难想的。

      

    用户缩放不会影响布局视口

    注意,这是『用户缩放』,后面会说开发者设置缩放的情况

    缩放比例

    我们在开发者工具中可以在这里查看缩放比例:

    查看缩放比例

    这里的 0.3 是相对于理想视口的。

    在下载浏览器中,可以这么算(理想视口与视觉视口的比):

    zoom level = screen.width / window.innerWidth
    

    禁止缩放

    <meta name="viewport" content="user-scalable=no">
    

     

    设置缩放

    <meta name="viewport" content="initial-scale=2">
    

    使用initial-scale有一个副作用:同时也会将布局视口的尺寸设置为缩放后的尺寸。所以initial-scale=1width=device-width的效果是一样的。

    完美视口

    解决各种浏览器兼容问题的理想视口设置

    <meta name="viewport" content="width=device-width,initial-scale=1">

       

    设备像素比

    在谈到像素的时候,讲到除了缩放,屏幕是否为高密度也会影响设备像素和CSS像素的关系。

    在缩放程度为100%(这个条件很重要,因为缩放也会影响他们)时,他们的比例叫做设备像素比(device pixel ratio):

    dpr = 设备像素 / CSS像素
    

    可以通过JS得到: window.devicePixelRatio

    设备像素比也和视口有关:

    dpr = 屏幕横向设备像素 / 理想视口的宽
    

    总结

    这一篇介绍了移动端适配需要掌握的知识,先说明了移动端存在的两种像素,然后介绍了三种视口,由缩放对视口的影响引入理想视口,最后说明设备想告诉比。

     之前做过PC页面的人聊的最多的就是『兼容』,这是因为浏览器之间的差异引起的,不再多说。而移动端是基本没有『兼容』的问题的,全是CSS3,简直不要太开心。可是『适配』问题随之而来。

    什么是『适配』?做PC页面的时候,我们按照设计图的尺寸来就好,这个侧边栏200px,那个按钮50px的。可是,当我们开始做移动端页面的时候,设计师给了一份宽度为640px的设计图。那么,我们把这份设计图实现在各个手机上的过程就是『适配』。

     

    那么,我们怎么开始呢?目前有三种方法:

    • 固定高度,宽度自适应
    • 固定宽度,viewport缩放
    • rem做宽度,viewport缩放

    这三种方法的核心都是视口的确定,现在以实现这个设计图为例说明。

    固定高度,宽度自适应

    demo

    这也是目前使用最多的方法,垂直方向用定值,水平方向用百分比、定值、flex都行。腾讯京东百度天猫亚马逊的首页都是使用的这种方法。

    随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用_响应式布局_调调就行(比如网易新闻),这样就实现了『适配』。

     

    原理

    这种方法使用了完美视口:

    <meta name="viewport" content="width=device-width,initial-scale=1">
    

    这样设置之后,我们就可以不用管手机屏幕的尺寸进行开发了。

    固定宽度,viewport缩放

    demo

    设计图、页面宽度、viewport width使用一个宽度,浏览器帮我们完成缩放。单位使用px即可。

    目前已知荔枝FM网易新闻在使用这种方法。有兴趣的同学可以看看是怎么做的。

     

    原理

    这种方法需要根据屏幕宽度来动态生成viewport,生成的 viewport 基本是这样:

    <meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
    

    640 是我们根据设计图定下的,0.5 是根据屏幕宽度动态生成的。

    生成的viewport告诉浏览器网页的布局视口使用 640px,然后把页面缩放成50%,这是绝对的等比例缩放。图片、文字等等所有元素都被缩放在手机屏幕中。

    这个gif图说明了一切:

    1

    rem做宽度,viewport缩放

    demo

    这也是淘宝使用的方案,根据屏幕宽度设定 rem 值,需要适配的元素都使用 rem 为单位,不需要适配的元素还是使用 px 为单位。

    具体使用方法见使用Flexible实现手淘H5页面的终端适配

    上文提供了sass和postcss的px2rem转换方法,我这里给出less的px2rem。因为less不支持函数,所以需要安装插件 less-plugin-functions ,然后就简单了:

    .function{
        .px2rem(@px,@base:72px){ return: @px / @base * 1rem; } }

    这样使用:

    div{
        width: px2rem(100px);
    }
    

    使用这个方法的库:

     

    原理

    实际上做了这几件事情:

    1. 动态生成 viewport
    2. 屏幕宽度设置 rem的大小,即给<html>设置font-size
    3. 根据设备像素比(window.devicePixelRatio)给<html>设置data-dpr

    rem

    这么设置的好处是可以让不同设备的rempx都显示一样的长度。

    设置rem

    设置rem的意义在于得到一个与屏幕宽度相关的单位,本来vw是最合适的,但是因为兼容性的问题,只能使用rem来做。这样,让不同设备的rem显示一样的长度。

    vw是CSS3引入的单位,1vw = 1%窗口宽度

    rem

    上面的布局我们可以这样:

    html{
        font-size: 屏幕宽度 / 10; 
    }
    .btn{
        width:8.75rem; height:1.25rem; }

    这样,无论屏幕宽度是多少,.btn都是相对于屏幕的这么宽,做到了适配。

    设置 viewport 缩放 和 data-dpr

    这两个设置其实是干的一件事,就是适配高密度屏幕手机的px单位。

    .a{
      font-size:12px;
    }
    [data-dpr="2"] .a{ font-size: 24px; } [data-dpr="3"] .a{ font-size: 36px; }

    而缩放是动态的,这样,不同设备下的px显示一样的长度。

    之前说过CSS像素和物理像素与缩放、dpr都有关系,这里说明:

    在普通手机上,.a字体设置为12px;

    在dpr是2的手机上,[data-dpr="2"] .a字体为24px,又因为页面缩放50%,字体为还是12px

    总结

    坦白说,我不觉得第一种方案能就做『适配』方案,因为太笨了,只能做一些列表等简单排列的样式

      

    转载于:https://www.cnblogs.com/JinQingsong/p/6613848.html

    展开全文
  • rem实现页面等比缩放 一、功能实现 二、实现原理 一、功能实现 第一步 第二步 第三步 第四步 正常编写代码,将带px单位的值... 总结:  像图片、文字、图形啥的只要都用的是rem单位,就能不改变布局实现等比缩放

    rem实现页面等比缩放

    一、功能实现

    第一步

    <head>
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    

    第二步

        <style>
        	body{ font-size: 16px;}
        </style>
    

    第三步

        <script>
            var fontSize = window.innerWidth / 3.75;   
            // 3.75为你所用的开发设备的屏幕大小除100,总之保证开发时值为100 
            document.documentElement.style.fontSize = fontSize + 'px';
            //修改html的font-size值
        </script>
    

    第四步

    正常编写代码,将带px单位的值除100转化为rem单位,例如: 20px => 0.2rem

    推荐插件:vscode插件 px to rem ,不知道其他开发工具有没有,自己搜一下。安装好后,在扩展设置改Px-per-rem为100,选中px数值后按alt + z自动进行数值转换

    二、实现原理

    1、开启Web页面缩放,并对相关的选项进行设定
        <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

    2、设置html的font-size的值
        rem单位是相对单位,根据屏幕分辨率的不同,会进行换算的,在本篇中1rem相当于100px,一般用于不同分辨率下,等比缩放的布局。
        window.innerWidth / (开发设备宽)/100,动态修改用户屏幕与开发屏幕比例对应的font-size值。这里设置初始值为100px,其实设置多少都无所谓,只是设置成100方便单位转换。

    3、设置body改回默认font-size
        html样式将字体默认大小修改了,所以要在body处改回来。

    总结:  像图片、文字、图形啥的只要都用的是rem单位,就能不改变布局实现等比缩放。
    🍉🍉🍉🍉🍉🍉🍉🍉🍉🍉🍉🍉

    展开全文
  • 等比缩放: 背景:当屏幕大小不同时,元素采用不同的宽度,凸显大屏更清晰的优势 1.百分比:层级多时,需要计算 2.flex:需要计算 3.单位rem:屏幕大时将html的font-size设大一点,固定地将html的font-size设置成...

    等比缩放:

    背景:当屏幕大小不同时,元素动态缩放,凸显大屏更清晰的优势
    1.百分比:层级多时,需要计算
    2.flex:需要计算
    3.单位rem:固定地将html的font-size设置成屏幕宽度的某一个百分比值,当需要定义宽高时,以rem为单位去设置
    4.单位vw,vh:把屏幕宽高分成100份,1份就是1vw(宽)或1vh(高),如20vw代表占屏幕宽度的20%;不用设置html的font-size,用起来更方便。
    同样是用巧妙的方式使用屏幕的百分比,但避开了直接使用百分比的动态复杂计算(逐渐推荐使用)

    rem VS em:
    rem和em都是单位,html的font-size设置多大,1rem就是多大;而父级的font-size多大,1em就是多大

    html {
    	font-size : 30px;
    }
    .wrapper {
    	font-size:60px;
    }
    
    <div class="wrapper">
        <div class="container">123</div>
    </div>
    

    此时1rem=30px;.container的font-size是60px

    rem与等比缩放:
    假设html的font-size是屏幕宽度的10%,某div的宽度设置2rem
    当屏幕是600px宽时,font-size为60,该div宽占比260/600=1/5;
    当屏幕是400px宽时,font-size是40,该div宽占比2
    40/400=1/5;
    相当于换了个固定宽度算百分比

    用js动态地设置font-size的值:

    window.onload = function() {
        var w = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = w / 10 + 'px';
    }
    
    <style>
        body {
            margin: 0;
        }
        div {
            font-size: 1rem;
            height: 2rem;
            width: 2rem;
            color: #fff;
            background-color: pink;
        }
    </style>
    
    <body>
        <div>ppp</div>
    </body>
    

    效果:
    当屏幕是ipone5/SE时,屏幕宽度320px,此时div的大小是64*64
    在这里插入图片描述
    当屏幕是Galaxy Fold时,屏幕宽度280px,此时div大小是56 * 56
    (当改变手机型号时,要刷新一下,要不然数据是上一个手机的)
    在这里插入图片描述

    viewport视窗

    1.物理像素:物理像素又被称为设备像素,它是显示设备中一个最小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度
    2.逻辑像素:一个可以由程序使用的虚拟像素(如CSS像素),然后由相关系统转换位物理像素
    3.设备像素比(dpr)=物理像素/逻辑像素

    一个物理像素≠一个逻辑像素,不同系统对应的逻辑像素不同

    随着科技不断发展,屏幕的像素越来越高,原本一个逻辑像素对应一个物理像素,现在可能一个逻辑像素对应2-3个物理像素,可能375px的宽,物理像素达到了700个,考虑长*宽,可能需要4或9个物理像素为1px服务
    在这里插入图片描述
    安卓手机的dpr有多种,每种可能都不一样,兼容起来比较难

    背景:1px问题:
    当页面追求更精细的样式效果,即:对一个物理像素做样式的设置,如果用0.5px甚至更小的px,有些浏览器不能识别,直接抹零,样式就不能生效
    这里拿苹果手机的屏幕做例子,它的dpr一般是2或者3
    如果dpr=2,我设置border时只想设置1个物理像素,就想写0.5px,
    在这里插入图片描述
    在这里插入图片描述

    但有的浏览器不识别0.5px,会直接抹掉,变成0px,就没有border了,这时候就需要用viewport视窗来实现这个效果了

    viewport就是浏览器上,用来显示网页的那一部分的区域。
    viewport严格等于浏览器的窗口,在桌面浏览器中,viewport就是浏览器窗口的宽度高度,但在移动端设备上,需要考虑逻辑像素与物理像素,精细样式如何体现等等
    IOS及新版本浏览器默认viewport为980px

    把html页面默认写好的viewport注释掉,再看移动端页面大小:
    在这里插入图片描述
    可以看到,并不是屏幕多大,页面就是多大的,可以看到,宽度是980px,是默认预设的宽度:
    在这里插入图片描述
    设置980px是因为一开始的页面都是展示在电脑上的,浏览器多大,页面就怎么显示,但是放在手机显示,可能会因为屏幕大小差距大,页面被缩小到用户无法看清内容,需要手动放大,后来设置手机页面默认宽度980px,手机屏幕放不下就用横向滚动条,滚动着看

    viewport默认有6个属性:
    1.width:设置viewport宽度,可以为一个整数,或字符串"device-width"设备宽度
    2.initial-scale:页面初始的缩放值,为数字,可以是小数,写小数num,就相当于放大1/num,可以将逻辑像素拓展到与物理像素是1:1状态,就可以不用写小于1的px(如0.5px)来表示一个物理像素了
    3.minimun-scale:允许用户的最小缩放值,为数字,可以是小数
    4.maximun-scale:允许用户的最大所防止,为数字,可以是小数
    5.height:设置viewport的高度(一般用不到)
    6.user-scalable:是否允许用户进行缩放,'no’为不允许,‘yes’为允许;现在是用响应式布局,默认会根据页面大小缩放元素,用户不需要自己缩放,此项写’no’,且将initial-scale、minimun-scale、maximun-scale三个设置成一样的

    解决办法
    比如在ipone6/7/8上设置initial-scale为0.5,屏幕宽度从375变成了750,ipone6/7/8的dpr=2,此时再在html等文件里写1px,就是指的一个物理像素,就不用写0.5px了
    在这里插入图片描述
    在这里插入图片描述

    iponeX的dpr=3,initial-scale就可以写成0.3333

    为了兼容各设备的dpr,用js判断dpr,然后动态设置initial-scale

    var oMeta = document.createElement('meta');
    oMeta.setAttribute('name','viewport');
    if (window.devicePixelRatio == 3) {
        oMeta.setAttribute('content', 'width=device-width, initial-scale=0.333,minimun-scale=0.333,maximun-scale=0.333,user-scalable=no');
    }
    
    if (window.devicePixelRatio == 2) {
        oMeta.setAttribute('content', 'width=device-width, initial-scale=0.5,minimun-scale=0.5,maximun-scale=0.5,user-scalable=no');
    }
    document.getElementsByTagName('head')[0].appendChild(oMeta);
    

    在这里插入图片描述
    window.devicePixelRatio的值可能不会是整数,可以在console里看看

    等比缩放与1px问题结合
    viewport和上面的rem可以结合起来使用,这样既解决1px的问题,又等比缩放

    设置1rem=页面宽十分之一,div宽2rem,高100px;
    ipone6/7/8的dpr=2,设置了viewport之后,body宽为750px,div宽为750/102 = 150,再加border,宽152px
    在这里插入图片描述
    iponeX的dpr=3,设置了viewport之后,body宽为1125px,div宽约为1125/10
    2 = 225,再加border,宽227px
    在这里插入图片描述
    关于这个方法,手淘将这个功能扩展并封装成js文件
    方案:手淘解决方案flexible
    http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js
    功能效果:
    1.根据屏幕大小动态改变html的fontSize,解决等比缩放问题
    2.给body设置fontSize,字体大小可以直接继承body的font-size
    3.给html标签添加data-dpr属性,可以通过查找该属性,给不同dpr设备设置个性化属性,如:

    [data-dpr='2'] div{
        font-size: 26px;
    }
    

    在这里插入图片描述
    用css的解决办法:
    另一种解决1px问题的办法,就是使用css3中的transform,先把宽高都写大一些,然后再用transform缩小(meta的initial-scale恢复默认的1.0)
    在这里插入图片描述

    当我设置宽高100px,border为1px时:

    div {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        color: #fff;
        background-color: pink;
    }
    

    在这里插入图片描述
    在这里插入图片描述

    当我用transform时:

    div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        color: #fff;
        background-color: pink;
        transform: scale(0.5, 0.5);
        transform-origin: 0 0;/* 中心点是左上角 */
    }
    

    在这里插入图片描述
    在这里插入图片描述
    可以看到,border是有差别的,第二个border的1px对应的就是1个物理像素(ipone 6/7/8的dpr是2)

    解决办法3:
    还有一种解决等比和1px的方法,用vw,
    vw+postcss(插件)(推荐)
    根据设计稿(如宽度750px的设计稿,以px为单位写大小),转换成vw,解决等比缩放问题
    对于小于1px的线,以px为单位,不转成vw。
    postcss-write-svg插件主要用来处理移动端1px的问题,主要使用border-image和background来做1px的相关处理,编译出来是border-image或者background

    对于等比缩放功能:
    比如,设计稿是750px的,里面有一个100px的btn,1vw = 7.5px,求?vw = 100px;这样就可以解决等比缩放的问题
    有插件专门可以计算在设计稿宽度下,px与vw的换算
    在这里插入图片描述
    install后点击右下角的齿轮------设置------修改设计稿的宽度
    在这里插入图片描述
    在这里插入图片描述
    默认750,如果是其他宽度,如1125px,就可以在这里改

    效果:
    在这里插入图片描述
    也有插件可以解决rem与vw的换算,一般只使用rem或vw中的一种,两种插件一个使用,一个禁用(启用禁用后要重启vscode)
    在这里插入图片描述
    默认html的font-size是16px:
    在首选项----设置(file----preference----setting)-----搜索插件名,可以看到和修改html的font-size:
    在这里插入图片描述
    效果:
    在这里插入图片描述

    最后:dpr不同的设备上图片的适配问题
    在这里插入图片描述
    分辨率大的图放在dpr小的设备上,会被降采样,图片不会模糊,但不那么锐利了,色彩不那么丰富,分辨率小的图放在dpr大的设备上,每一块像素会被分解成多块,图片会变模糊

    解决办法:
    用meta动态匹配,或用js动态匹配,当dpr小的情况,放分辨率较低的图;当dpr大的情况,放分辨率高的图
    或者都使用高清图即可

    用meta:

    @media
    only screen and (-webkit-min-device-pixel-ratio:2),
    only screen and (min--moz-device-pixel-ratio:2),
    only screen and (-o-min-device-pixel-ratio:2/1),
    only screen and (min-resolution:192pdi),
    only screen and (min-resolution:2dppx){/*判断dpr*/
        div{
            img:...
        }
    }
    

    用js:

    window.onload = function() {
        if (window.devicePixelRatio > 1){
            var images = Array.prototype.slice.call(document.getElementsByTagName('img'));
            images.forEach(function (ele, index) {
                var lowers = images[index].getAttribute('src');/*logo.png*/
                var highers = lowers.replace('.','@2x.');/*logo@2x.png*/
                images[index].setAttribute('src',highers);
            });
        }
    }
    

    在这里插入图片描述

    展开全文
  • Android动态UI适配(等比缩放

    千次阅读 2018-01-24 02:22:46
    在Android日常开发中,我们...主要是运用了等比缩放的方案,但是在实际开发中,只做X轴的等比,Y轴超出部分用滚动条。 这样就能避免,XY轴同时缩放带来的变形问题。 Axis是什么? 一个用Java代码动态布局的适配方案...
  • 1 什么是vw? vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。能够实现页面内的字体大小跟随视口的大小而改变。 1vw 视口宽度的1% 100vw 视口宽度的100% 1vh 视口高度的1% ...
  • 弹性布局中,如何实现响应式页面图片等比缩放注意的问题 CSS代码: body代码: 运行结果: 当缩小响应式页面后的结果: 造成的原因: 三张图片的宽度百分比是32.5%,左右外边距会造成有多余的间隔,不能使图片等比...
  • 等比缩放布局(rem布局) 特点:页面里边的元素会根据分辨率等比例放大或缩小. rem是根元素(html)的font-size的倍数。 rem: 指相对于根元素的字体大小的单位。 根元素:会相对设备尺寸自动变换。 VW: 视窗宽度,...
  • 第五步:页面大体布局 确定页面的哪一块是固定的,哪一块是可以滑动的。例如商城应用中,顶部的搜索框和底部的导航栏是固定的,中间的内容区域是可滑动的,即上中下结构。 这一步是为了开发时思维更加清晰,把页面...
  • 来源 |https://www.lebang2020.cn/details/210124ycbfvuqd.html在开发网页的时候少不了图片,展示图片时自然会遇到缩放问题。一般情况下只...
  • -- 使移动应用程序占据整个浏览器屏幕并禁用用户缩放--> content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <!-- 页面描述:大屏仓库 --> <!-- 作者 --> ...
  • 所以实现动态的比例缩放 可以根据window.onresize 来监听可见视图的变化 来 改变html document.documentElement.fontSize = document.documentElement.clientwidth / (所需变化元素宽度/font-size:20px) ...
  • Pyqt5自适应布局实例

    2020-09-18 07:05:42
    今天小编就为大家分享一篇Pyqt5自适应布局实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • size可以等比改变所有用了rem单位的元素,所以大家可以通过chrome浏览器的调试工具去切换第三个的demo在不同设备下的展示效果,或者通过缩放浏览器的宽度来查看效果,我们可以看到不管在任何分辨率下,页面的排版都...
  • 前端处理过图片的同学,当图片出现像素大小不一,高宽不确定的时候,很多时候,需要根据容易大小完成图片的自适应等比缩放效果,不然会出现图片变形或者图片被裁剪的不友好渲染. 解决方法: 1.治标.要想治标的话,就需要...
  • pc端 等比例缩放

    千次阅读 2019-04-12 01:38:20
    偶然间学习的一段代码 有效果 哪位大神解释留言一下 不慎感激 methods:{ screen: function(w, h) { var width = $(window).width(); var height = $(window).height(); var scale = 0;......
  • 我们移动端布局想要的是理想视口就是手机屏幕有多宽,我们的布局视口就有多宽。想要理想视口,我们需要给我们的移动端页面添加 meta视口标签。 <meta name="viewport" content="width=device-width, user-...
  • 同学们面对移动端不同分辨率的手机,肯定也为自适应的布局头大吧。 有了REM一切好像变的简单了,现在一般移动端的设计宽度都是750PX,或者640PX.今天我们就以750的设计稿为例讲下怎么还原设计吧。 在750px下 ...
  • 一、元素等比缩放解决方案 <style> /*等比缩放*/ .box{ position: relative; width: 50%; /* desired width */ background: #000; color: #fff; } .box:...
  • 比如同一个页面下,372px 和642px显示比例下文字大小和块元素高度会随着显示的比例来等比缩放 比例始终显示协调,不用重复调试,其中一个重要的元素是将所有定义宽高的元素设置为rem rem是一个相对大小的值,它...
  • 自适应布局——等比缩放式案例,页面大小和字体随着页面变大而变大
  • 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。 !!!不会出现图片拉伸的情况 五:auto 背景图像的真实大小。 如果背景框是固定的那么就可以用length属性, ...
  • 一直以来,我们设计windows应用程序,都是将控件的尺寸定好,无论窗体大小...今天我们来看看WPF中如何让我们的控件也随着分辨率放大缩小。下面来写一个例子看看效果吧~    一、普通布局中的问题  这里我们写...
  • 简单方法Transform等比缩放解决大屏展示屏幕分辨率的问题一、为什么不用rem?二、使用transform1.transform用法2.项目中使用 一、为什么不用rem? rem方案固然好,但是我司项目中的业务场景是某个页面大屏展示,rem...
  • 注意:我这里使用了flex布局整个样式看起来效果比较好,想要改变多边形,只需要调整list里的宽高方可。主要的是等比例缩放,我这里宽高使用的都是vw,这个很重要,如果使用px,em,rem等都不会达到适配。具体px和vw...
  • 浅谈Flex布局缩放比例计算

    千次阅读 2020-06-05 16:00:40
    一、Flex 布局简介 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局,也就是说,行内元素也可以设置成Flex 布局。 1 2 3 4 // 将块级元素...
  • rem布局实现不同分辨率移动终端的自适应、整体缩放 rem布局实现不同分辨率移动终端的自适应、整体缩放
  • 一、静态布局(Static Layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度...
  • <Viewbox Visibility="Visible" Stretch="Fill"> <Canvas x:Name="canvas" Height="768" > 布局内容。。。 </Canvas> </Viewbox>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,456
精华内容 1,782
关键字:

等比缩放布局