基础学习15 移动端

最新推荐文章于 2021-07-11 09:42:04 发布

aZF1997

最新推荐文章于 2021-07-11 09:42:04 发布

阅读量207

点赞数

分类专栏：学习文章标签：笔记

本文链接：https://blog.csdn.net/aZF1997/article/details/98099319

版权

学习专栏收录该内容

45 篇文章 0 订阅

订阅专栏

移动端布局

像素单位（相对单位）以下是1英寸下像素分布为10的分布图（10px/1英寸）

PPI（Pixels Per Inch）每一英寸的像素数量称为像素密度。

Retina即视网膜屏幕，苹果注册的命名方式，意思是具有高PPI的屏幕一般大于320px

主流设备的化分

四大类

大屏设备 PC >1200px

中屏设备 992px—1200px

小屏设备 768px-992px ipad 768px

超小屏 <768px 320px,375px,414px,…

主流的适配方案

1：流式布局大盒子给百分比 (100% ) 尽量不出现px单位

max-width:640px ; min-width:320px;

图片固定height 宽度% max-width:100% —>不完美 (用户看到的图片变形) ？

2：rem单位布局+ 媒体查询+ less

查询屏幕宽度  设置不同样式 ---> 后期不好维护 

@media screen and (min-width:320px) and (max-width:640px) {
    屏幕在320px和640px之间是满足条件  则执行{ }里代码
    .box {
        min-width:320px;
        max-width:640px;
        width:100%;
    }
    
    
}
@media screen and (device-width:320px) {
     .box {
   
        width:300px;
        height:200px;
    }
    .box1 {
        
    }
    .box2 {
        
    }
}
@media screen and (device-width:375px) {
     .box {
   
        width:330px;
        height:230px;
    }
    .box1 {
        
    }
    .box2 {
        
    }
}

rem布局

1：当前设备宽度的字体基值 px = 当前预设字体基础值(100px)*当前屏幕宽度/UI设计稿的宽度

缺点：就是设备按区间换分不精确

 <style>

    @media screen and (min-width:320px)  {
        html {
           /* 字体基础值  10px  1rem = 100px  rem单位是相对于html的单位 */
           font-size: 50px;
         }
    }
    @media screen and (min-width:375px)  {
        html {
           /* 字体基础值  10px  1rem = 120px  rem单位是相对于html的单位 */
           font-size: 58.59px;
         }
    }
    @media screen and (min-width:414px)  {
        html {
           /* 字体基础值  10px  1rem = 10px  rem单位是相对于html的单位 */
           font-size: 64.6875px;
         }
    }


    .box {


        /* 32rem 28rem 320 320px*280px
         375 32rem = 32*12= 384px 
         28rem = 28*12 =336px

         414   w * h 
        
        */
        width: 3.2rem;
        height: 2.8rem;
        font-size: 1rem;
        background-color: pink;
    }
   
   
    
    </style>

2;js查询当前设备的宽度，根据设备宽度动态计算字体基值

<script>
        // 实时监控屏幕宽度的变化 监听器

         //代表设计稿的宽度 
        var UIw = 640;
        var prev_fs = 100;

    window.onresize = function(){



          //获取当前设备的屏幕宽度  保存到 deviceWidth这个 变量里
          var deviceWidth = document.documentElement.clientWidth;
        //   console.log(deviceWidth);
          // 公式 计算当前屏幕宽度对应的html字体大小值fs

          var fs = deviceWidth*prev_fs/UIw + 'px';

           //设置html标签的字体基值为fs
          document.documentElement.style.fontSize = fs ;
          console.log(fs)



    }
    
    
    </script>

主流适配：弹性盒、流式布局（宽度百分比，必须限定区间，高度auto ）、rem+媒体查询

响应式设计的步骤

1. 设置 Meta 标签

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。(原始视口980px 展示出来的界面是图和字特别小----》设置视口为屏幕宽度)

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

[1]（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。）

2. 通过媒介查询来设置样式 Media Queries

Media Queries 是响应式设计的核心。

它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：

@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

这里的样式就会覆盖上面已经定义好的样式。·

3. 设置多种视图宽度

假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

一些注意的

1. 宽度需要使用百分比

例如这样：

#head { width: 100% }
#content { width: 50%; }

2. 处理图片缩放的方法

简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。

img { width: auto; max-width: 100%; }

3. 其他属性

例如 pre ，iframe，video 等，都需要和img一样控制好宽度。对于table，建议不要增加 padding 属性，低分辨率下使用内容居中：

table th, table td { padding: 0 0; text-align: center; }