移动端小记

最新推荐文章于 2022-11-14 08:41:01 发布

原创最新推荐文章于 2022-11-14 08:41:01 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

布局专栏收录该内容

1 篇文章

订阅专栏

本文探讨了媒体查询、视口设置与动态字体调整技术，用于实现移动与响应式网页设计。介绍了rem、vw/vh单位及retina屏幕适配方法，详细讲解了通过JavaScript动态调整字体大小和使用媒体查询实现不同设备上的样式切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

媒体查询设置root

@media screen and (min-width: 320px) {

    html {font-size: 14px;}

}

利用JS动态设置

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

移动端单位
------------------------------------------------
rem (font size of the root element) root=>html

vw/vh (view width/height) 共100份

eg：width：10vw (占view宽度的10份)
height：10vh

vmax 取view宽和高里面最大的
vmin 取view宽和高里面最小的

retina 2倍或者 3倍的屏幕（苹果提出的）主要用于icon图标

.div{
    background:url(icon.png) 0 0 no-repeat;
    background-image:-webkit-image-set(url(icon.png) 1x,url(icon@2x.png) 2x)
}

//-webkit-image-set 设置让retina的屏幕看图更清晰

<img src="icon.png" srcset="icon@2x.png 2x" alt="">

//img情况下设置 srcset 让retina的屏幕看图更清晰

或者直接用background:url（icon@3x.png）0 0 no-repeat,然后background-size:cover 但是加载速度会有影响

base64
把图片转成64进制的编码

移动端页面：不用考虑PC pad viewport | rem
   适配（兼容）适应各个不同的设备
   浏览器、微信（通过朋友圈等）、QQ(内置浏览器)、UC（pc的ie6）
   国产手机

   PC版和手机版分开做：数据交互量很大（在PC上展示的内容不能完全放在移动端）

响应式页面
必须共享一套HTML结构，样式不同而已，通过设备的分辨率来自动去切换样式
只适用于简单的页面：博客、新闻、简单的公司门户（公司的小网站）

viewport（兼容主流机型）

 <meta id="viewport" name="viewport" content="width=640,initial-scale-.5.maximum-scale=.5,minimun-scale-.5,user-scalable=no">

手机屏幕尺寸：
   iphone 5 320       0.5
   iphone 6 375       ?
   iphone 6p 414
页面是640
   initial-scale=1 初始缩放比例
   maximum-scale=1 最大
   minimum-scale=1 最小

   初始缩放比例=屏幕尺寸/网页尺寸（设计图尺寸）

之前改的是 html 字体大小所有的元素通过html 的大小来做调整

获取屏幕的宽度：window.screen.width

1.定宽
2.rem
3.viewport

参考：设计规范：https://www.zhihu.com/question/25308946
px转rem:https://www.520ued.com/tools/rem

判断是否是横屏：

window.onload=window.onresize=function(){
    if(window.orientation=="-90"||window.orientation=="90")    {
        alert("请竖屏观看");
    }
}

响应式：
   兼容的设备更多
   PC、Pad、移动端（和上面的纯移动端思路是两回事）、IE6-8
   一套HTML结构，去适应多种不同的布局
   需要兼容的尺寸：
       pc的普屏 1000（方的显示器：1024*768）
       pc 宽屏 1190/1200/1210/1600（1366 * 768 / 1440 * 768 / 1920 * 1080）
       pad 768 横屏（1024*768）竖屏（768*1024）
       phone 分辨率就不一定了

   原则：所有的响应式页面，永远从最低的分辨率开始写起（phone>pad>pc>pc宽屏）

做法：以手机端样式为基础样式，兼容其他设备样式

媒体查询：(放在最后去做，css遵循顺序规则)
   声明：@media
   条件：min-width、height/max-width、height/设备类型
       and:并且
       not:不是什么
       only:不支持忽略

       device-width/min-device-width/max-device-width

       orientation:landscape 横屏
       orientation:portrait 竖屏

   @example1


    @media (min-width:768px){ //pad
        .box{
            width:600px;
        }
    }
    @media (min-width:1000px){ //pc
        .box{
            width:1000px;
        }
    }

@example2



    @media (min-width:768px) and (max-width:999px){ //pad  >=768&&<=999
        .box{
            width:600px;
        }
    }
    @media (min-width:768px) not screen{ 
        .box{
            width:600px;
        }
    }
    @media (min-width:768px) only screen{ 
        .box{
            width:600px;
        }
    }

@example3

@media (min-width:768px) and (orientation:landscape){ 
        .box{
            width:600px;
        }
    }

------------------------------------------------end
viewport布局

<meta name="viewport" content="width=640">

移动端（rem）、响应式布局

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

*使用mobile-util.js可以省略这个meta js里面会自动网页面加这个meta