多列布局、媒体查询、移动端

      *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        body{
           
            background:url(images/a.png),url(images/bg.gif);//设置动图
            background-size:500px 500px;
            background-color:#352323;
        }
        img{
            display:block;
            width:100%;
        }
        section{//设置多列属性
            width:95%;
            margin:0 auto;
            column-count: 5;
            column-gap: 10px;
            column-fill: auto;
        }
        figure{//图文混排
            border:2px solid pink;
            margin-bottom:10px;
            padding:5px;
            break-inside: avoid;/*防止元素出现中断*/
<body>       
        <figure>
            <img src="images/1.jpg" alt="">
            <figcaption>往后余生，风雪是你</figcaption>
        </figure>
<body>

二、移动端相关知识

1.什么是移动端

可以方便移动的设备都统称之为移动端，比如：手机、平板、手表等

右键----检查----找到设备模拟器切换窗口

2.设备模拟器里面内容介绍

a)iphone678======手机型号

b)375*667========手机屏幕的分辨率

c)75%============观看比例

d)旋转小图标======切换横屏和竖屏

e)右上角三个圆点:::

i.capture screenshot 截取手机屏幕得相关设计稿（短图）

ii.capture full size screenshot 截取手机屏幕相关设计稿(带有滚动条区域得所有)

3.常见设备的大小、屏幕的大小

a)iphone4========320*480

b)iphone5========320*568

c)iphone678======375*667

d)iphone678s=====414*736

4.获取设计稿的大小

a)iphone4=========640*960=======2倍

b)iphone5=========640*1136======2倍

c)iphone678=======750*1334======2倍

d)iphone678s======1242*2208=====3倍

5.设备像素比

设备像素比（dpr）=设备像素/设备独立像素

a)设备像素（物理像素）====像素点、设计稿的大小、ps量出来的大小

b)设备独立像素（逻辑像素、虚拟像素、css像素）=====设备的大小、开发人员要写的css像素。

简言之：设备像素=设计稿上量出来的 css像素==你要写的像素

应用题：假设现在你拿到的是iphone678的设计稿，设计稿的大小一般是750px，那么你测量出来在代码里面应该写多少像素。

a)已知设计稿750px，也就是物理像素是750

b)我们也知道iphone678对应的手机屏幕大小是375px

c)所以得出结论逻辑像素是375

d)进而得出设备像素比是2倍的关系

e)所以假设我们量出来一个区域高度是80px，这里的80指的是物理像素，像素比是2，所以得出逻辑像素也就是css像素是80/2=40px。

6.视口

（1）布局视口：布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，

（2）视觉视口：视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度，下面通过图2演示什么是视觉视口。

（3）理想视口：理想视口是指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。

如何将视口变成理想视口，并且禁止用户缩放

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

width=device-width：布局的宽度等于设备的宽度

initial-scale=1.0：初始缩放比例为1

minimum-scale=1.0：最小缩放比例1

maximum-scale=1.0：最大缩放比例1

user-scalable=no：禁止用户缩放

7.布局中的单位

（1）常见单位

a)%======占父元素的百分比

b)px===像素单位===固定的死值，是多少个px就显示多少个像素的大小

c)em===相对单位===相对于当前文字大小而言。

d)rem==相对单位===相对于根目录（根结构）html的字体大小。

默认的1rem=16px，因为页面默认文字大小就是16px

如果将根目录字体大小写成30px，那么1rem=30px

所以1rem=html的font-size。

一般在移动端中偏向使用rem

（2）转换步骤

/* 02字号设置为vw结合rem实现实时适配；
   01媒体查询结合rem实现的是区域适配； */
html {
    /* 假设基准字号font-size: 12px; */
    /* 设计稿640px----设备320px----1vw=3.2px----12px=12/3.2px=3.75vw */
    font-size: 3.75vw;


    /* iPone678---设备375px----1vw=3.75px----12px=12/3.75px=3.2vw */
    /* iPone678/plus---设备414px----1vw=4.14px----12px=12/4.14px=2.89vw */
}
header {
    /* 设计稿640px----设备320px
       ps高度88px----css高度44px-----44/12【3.75vw*3.2px==12px】=3.6667rem
       [设计稿/dpr/font-size===rem] */
    height: 3.6667rem;
}

因为媒体查询很难达到实时适配的目的，所以我们才要学习vw和vh

vw：view width===视口宽

vh：view height===视口高

什么是视口：只要用户能看见的区域就是视口

100vw=视口的宽度 100vh=视口的高度

1vw=视口宽的1% 1vh=视口高的1%

假设视口宽度是320的，请问：

100vw=320px

1vw=3.2px

假设视口高度是1080的，请问：

100vh=1080px

1vh=10.8px

因为vw是相对于视口宽度而言的，只要视口宽度发生改变，那么vw就会立即跟着改变。

所以我们将来移动端要想达到实时适配的目的：vw和vh===能够实现等比例缩小放大的布局==可以应用再移动端布局里面，一般会用vwvw的问题

width:100vw与width:100%;效果一样吗？

分情况考虑：

1.如果页面没有滚动条的话，width:100%和width:100vw实现效果是一致的。

2.如果页面有滚动条的话，width:100%和width:100vw实现效果不一致。

3.不一致原因：

a)视口的宽度，里面包括滚动条；width:100%里面不包含滚动条

8.移动端横向滚动条

/* =======导航板块======= */
nav {
    display: flex;
    height: 2.25rem;
    border-bottom: 1px solid #ccc;
}
/* =======横向滚动条======= */
nav ul {
    flex: 1;
    height: 2.25rem;
    display: flex;
    align-items: center;
    overflow: auto;
}
nav ul li {
    padding: 0 1.25rem;
    /* 不让li挤压 */
    flex-shrink: 0;
}
nav div {
    width: 2.25rem;
    height: 2.25rem;
    text-align: center;
    line-height: 2.25rem;
}
<body>
 <!-- 导航板块 -->
    <nav>
        <!-- 左边的导航 -->
        <ul>
            <li>精选</li>
            <li>女装</li>
            <li>男装</li>
            <li>童装</li>
            <li>美妆</li>
            <li>电器</li>
            <li>零食</li>
            <li>手机</li>
            <li>箱包</li>
            <li>家具</li>
        </ul>
        <!-- 右边的图标 -->
        <div class="iconfont icon-sousuo"></div>
    </nav>
</body>

三、媒体查询

媒体查询：可以检测设备的宽度或者高度，媒体查询的语法（属于css代码）

如果设备的宽或者高发生了改变，那么我们可以在代码中写出不同的布局样式的。

一般媒体查询会在pc端写一些响应式布局，或者在移动端做一些适配工作。

响应式布局：如果设备大小发生改变，布局规则就发生改变。（要想实现响应式布局，必须结合媒体查询技术才能）

  /* 利用媒体查询，检测所有的设备 并且 设备的最低宽度是700px，
     最小宽度是1000px的时候让box宽度为22%  这样一行就能放下4个box */
        @media all and (min-width:1000px){
            .box{
                width: 22%;
            }
        }

四、利用媒体查询结合rem来实现移动端布局

1．为什么说移动端一般比较喜欢用rem单位呢？

1)因为rem单位是相对于根元素html的字体大小而言的。

2)我们做移动的目的就是为了实现自适应（当手机变大的时候让页面元素也适当的变大，当手机变小的时候让页面元素也适当的变小）

3)我们可以利用媒体查询技术检测当前屏幕的宽度，如果屏幕宽度发生变化那么我们也让html的字体发生变化。

4)然后让页面的元素宽高设置成rem单位，这样就可以实现在不同大小的手机上呈现的页面元素大小是不一样的。

2．实现步骤

1)先确定dpr

假设我拿到的设计图的大小是640px的，那么设备像素（物理像素）就是640。

已知640的设计稿一般对应的是iphone5，那么iphone5的设备宽度是320px，所以逻辑像素（css像素）就是320

因此得出像素比dpr是：2

2)写媒体查询，将不同宽度下的html大小写成不一样。

媒体查询一般分3个档位：320/320-375/375以上

3)将html和body的height设置成100%,然后变成弹性盒子，纵向排列

4)开始划分版块===单位写成rem===量出来的px/dpr/html的font-size

五、利用vw结合rem实现移动端

1.如果我们利用媒体查询来实现移动端确实可以做到不同手机的适配问题。但是这样感觉还不是特别的好。因为媒体查询控制的是宽度的一个区间，只要在这个区间之内的效果都是一样的。

2.现在我想实现哪怕设备的宽度发生一点点的变化，我也想让元素的大小跟着发生变化。这个时候就需要就需要用到vw单位了。

3.我们只需要将html的字体单位设置成vw即可。

1.那么html大小设置成多少vw合适呢?

一、在前面我们在计算rem单位的时候就发现设置成10px或者100px更好计算一点。一般建议100px

二、将100px转化成vw

以iphone5屏幕大小320px为例：

320px=100vw

3.2px=1vw

100px=？vw=====应该是31.25vw

所以一般建议在640的设计稿之下将html字体大小设置为：31.25vw

以iPhone678屏幕大小375px为例：

375px=100vw

3.75px=1vw

100px=？vw======应该是26.67vw

所以一般建议在750的设计稿之下将html字体大小设置为：26.67vw

2.实现步骤：

一、确定设计稿和dpr

二、将html的font-size写成对应的vw

三、将html和body高度写成100%，变成弹性盒子，纵向布局

四、开始划分版块===单位写成rem===量出来的px/dpr/100

备注：更改基准值：设置=>搜索“cssrem”=>基准值修改

六、使用flexble.js文件

1.不管是用媒体查询还是vw总之都是需要自己去计算的，不太方便。

2.利用别人写好的这个js文件就省事很多

3.使用步骤：

a)引入：

b)量出来的px/100即可

c)不用考虑视口的问题，也不用考虑dpr的问题，人家这个js文件已经帮我们处理好了。

野槐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多列布局、媒体查询、移动端

一、多列布局多列布局类似报纸或杂志中的排版方式，主要用以控制大篇幅文本。1.多列属性 1、column-count属性规定元素应该被分隔的列数适用于：除table外的非替换块级元素, table cells, inline-block元素 2、column-gap属性规定列之间的间隔大小 3、column-rule设置或检索对象的列与列之间的边框。复合属性。column-rule-color规定列之间规则的颜色。column-rule-style规定列之间规
复制链接

扫一扫