CSS媒体查询

2021-02-27

出现的意义

为了应对不同尺寸的屏幕显示的样式，通常把媒体设备分类两大类：screen 和 print

style中使用不同的媒体设备样式

<style media="screen">
...其中的样式将会引用到屏幕设备中
</style>
<style media="print">
...其中的样式将会引用到打印机设备中
</style>

LINK引入css样式表

1 2	< link media="screen" href="..."/> < link media="print" href="..."/>

** 但是这样引入会显得页面杂乱，于是出现了@import来简化页面多文件引入 **

    @import url(common.css);
    @import url(screen.css) screen;
    @import url(print.css) print;
/*  url()会根据当前test.css的位置，来搜索css文件
*/

@media设置某部分的样式随媒体的属性变化–局部定义响应查询

@media AND条件判断响应式使用

<style media="screen and (min-width:768px)">
/* 条件语句用()包裹，min-width:768px <=> 屏幕的最小宽度为768px,即屏幕宽度>=768px */
<style media="screen and (max-width:768px)">
/* max-width:768px <=> 屏幕宽度<=768px*/

** 那么当两个条件都写时，当屏幕为768px时，样式由谁决定？：优先级按照顺序排序越往后写优先级越高，所以按照max-width:768px

@media 逻辑或的使用

css中的逻辑或用 , 表示
    <style media="screen and (orientation: landscape)
    ,screen and(min-width:768px)">
    /* 意思是当屏幕为横屏或者屏幕的宽度>=768px时，使用以上样式*/

@media 非的使用

<style>
    @media screen and (min-width:768px) and (max-width:1000px){
        ...
    }
    当屏幕宽度在[768px,1000px]时使用上面的样式，那么区间之外的想要再设置一个不同的样式该怎样写呢？如下
    @media not screen and (min-width:768px) and (max-width:1000px)
</style>

使用 only排除低端浏览器

1 2	@media only .... /* 意思是仅当浏览器支持媒体查询时使用 */

展开全文 >>

移动端-无缝滑屏-1

2020-03-06

在PC端，轮播组件在设计的时候只需要考虑横向上的设计，但是在移动端需要考虑横纵上的设计：比如在移动端的轮播图上竖向划屏，是应该触发轮播图的事件还是APP页面的上划移动，这种冲突就是抖动。

所以我这次的目标是实现一个防抖动的无缝滑屏

初步布局

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=no"
    />
    <title>无缝滑屏</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #wrap {
        overflow: hidden;
        height: 100%;
      }
      .carousel-wrap>.my-list {
        width: 500%;
        /* ul里的li浮动后，ul高度塌陷，所以要清除浮动 */
        overflow: hidden; /* 移动端清除浮动的方式 */
      }
      .my-list > li {
        width: 20%;
        list-style: none;
        float: left; /* 父级元素ul的宽度不够如此设置依然不能成为一行 */
      }
      .my-list > li > a,
      .my-list > li > a > img {
        display: block; /* 不写这个有空隙 */
      }
      .my-list > li > a > img {
        width: 100%; /* 一层层寻找设置宽度的父级元素，并以此为标准 */
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div class="carousel-wrap">
        <ul class="my-list">
                <li><a href="javascript:;"><img src="/img/1.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="/img/2.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="/img/3.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="/img/4.jpg" alt=""></a></li>
                <li><a href="javascript:;"><img src="/img/5.jpg" alt=""></a></li>
        </ul>
      </div>
    </div>
  </body>
  
</html>

初步的效果，但是问题来了：1.要封装成一个组件，图片的数量和内容都不能是静态写死的 2.要暴露出一个让用户使用无缝滑屏的接口 3.my-list类的宽度不能是静态的

先解决问题3：动态创建节点和动态设置宽度

首先css要做修改

/* css */
 * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #wrap {
        overflow: hidden;
        height: 100%;
      }
      .carousel-wrap>.my-list {
        /* display: flex;也可以使用弹性盒+盒子宽度500% */
       /*  width: 500%; */
        /* ul里的li浮动后，ul高度塌陷，所以要清除浮动 */
        overflow: hidden; /* 移动端清除浮动的方式 */
        /* 脱离文档流，carousel-wrap高度塌陷 */
        position: absolute;
      }
      .my-list > li {
        /* width: 20%; */
        list-style: none;
        float: left; /* 父级元素ul的宽度不够如此设置依然不能成为一行 */
      }
      .my-list > li > a,
      .my-list > li > a > img {
        display: block; /* 不写这个有空隙 */
      }
      .my-list > li > a > img {
        width: 100%; /* 一层层寻找设置宽度的父级元素，并以此为标准 */
      }

/* js */
/* 模拟从后台拿到的数据 */
let src = [
      "/img/1.jpg",
      "/img/2.jpg",
      "/img/3.jpg",
      "/img/4.jpg",
      "/img/5.jpg",
    ];
let carouselWrap = document.querySelector(".carousel-wrap");
/* 使用插件的用户的存放图片path的数组不一定名：src，所以通过一个函数来规定 */
    function carousel(src=["/img/1.jpg",
      "/img/2.jpg",
      "/img/3.jpg"]) {
    /* 如果页面中有.carousel-wrap */
      if (carouselWrap) {
        let ul = document.createElement("ul");
        let ulWidth = src.length*100;
        let liWidth = 100/src.length;
        let liFromUl = ul.getElementsByTagName('li');
        ul.classList.add('my-list');
        /* 动态创建DOM节点 */
        src.forEach((i) => {
          ul.innerHTML += `<li><a href="javascript:;"><img src="${i}" alt=""></a></li>`;
        });
        /* 动态计算滑动容器的宽度 */
        ul.style.width = ulWidth+'%';
        [...liFromUl].forEach((item)=>{
            item.style.width = liWidth+'%';
        })
        
       /* 解决carouselWrap高度塌陷问题 */
        [...carouselWrap].forEach(item=>{
            item.appendChild(ul);
            /* let img = document.querySelector('.my-list > li > a > img');console.dir(img.clientHeight);高度为0的原因：调试可知：在执行到这个语句时DOM节点还未渲染出来，所以没有高度。问题解决：异步编程 */
            let imgTime = setTimeout(()=>{
            let img = document.querySelector('.my-list > li > a > img');
            item.style.height = img.clientHeight+'px';
            clearInterval(imgTime);
            },0)
            /* 获取ul>li中的img的高度赋值给carouselWrap */
        })   
      }
    }

展开全文 >>