CSS5:移动端页面(响应式)

时间 2019-11-10

标签 css5 css 移动页面响应栏目 CSS 繁體版

原文原文链接

CSS5:移动端页面(响应式)

若是手机端和PC端页面差异很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就能够了.关于判断是手机端你仍是PC端,就交给后端来作
只有一些新闻站点和博客站点用响应式,由于布局简单,响应式足够

1.媒体查询 media query

媒体:电脑,纸张,都是媒体
含义:若是媒体知足0到800 之间,那么会应用这里面的样式css

<style>
        @media (max-width: 800px){/*若是媒体知足0到800 之间,那么会应用这里面的样式*/
            body{
                background-color: red;
            }
        }
    </style>

注意:html

<style>
        @media (max-width: 800px){/*若是媒体知足0-800 之间,那么会应用这里面的样式*/
            body{
                background-color: red;
            }
        }
        @media (max-width: 900px){/*若是媒体知足0-900 之间,那么会应用这里面的样式*/
            body{/*这段媒体查询比上面优先级高,会将上面的覆盖,若是低于800了,会变成蓝色*/
                background-color: blue;
            }
        }
    </style>

因此要倒过来写,先写大范围vue

<style>
        @media (max-width: 768px){/*0-768*/
            body{
                background-color: blue;
            }
        }

        @media (max-width: 425px){/*0-425*/
            body{
                background-color: red;
            }
        }
        @media (max-width: 375px){/*0-375*/
            body{
                background-color: orange;
            }
        }
        @media (max-width: 320px){/*0-320*/
            body{
                background-color: black;
            }
        }@media (min-width: 769px){/*769~+++*/
         /*超过769的*/
            body{
                background-color: green;
            }
        }

    </style>

也能够规定详细范围:
jquery

1.1引用方法

也能够使用CSS文件的方法引用
css3

https://segmentfault.com/ (这个网站就用了响应式)
还有https://www.smashingmagazine....
能随着你屏幕宽度动的页面就是响应式页面git

1.2 要向设计师要网页设计图

1.3 隐藏菜单响应式

预览地址(缩小浏览器宽度查看效果)github

1.3.1先作手机仍是先作PC

Mobile first 先作手机
desktop first 先作PC
推荐Mobile first,由于如今大部分都是手机看网页ajax

1.3.2CSS优先级问题解决方法

用谷歌开发者工具查看CSS优先级,而后调整
若是style内嵌在html里,好比jquery的toggle,那么直接使用display: none !important;

1.3.3flex布局的一些用法

header{
                display: flex;
                /*里面的垂直居中*/
                align-items: center;
            }

header .mobilMenu {

            display: flex;
            justify-content: space-around;
            /*flex布局display: flex;这个容器使用flex布局
            justify-content属性定义了项目在主轴上的对齐方式。
           justify-content: space-around;每一个容器里面的项目两侧的间隔相等。*/
            background-color: #ccc;
        }

代码

预览segmentfault

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式页面</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul, ol {
            list-style: none;
        }

        .logo {
            width: 60px;
            height: 60px;
            background: #000;
            border-radius: 50%;
        }

        header {
            position: relative;
        }

        header > button {
            position: absolute;
            right: 0;
            top: 26px;
        }

        header .mobilMenu {

            display: flex;
            justify-content: space-around;
            /*flex布局display: flex;这个容器使用flex布局
            justify-content属性定义了项目在主轴上的对齐方式。
           justify-content: space-around;每一个容器里面的项目两侧的间隔相等。*/
            background-color: #ccc;
        }
        header .pcMenu{
            display: none;
        }
        /*接下来作pc端*/
        @media (min-width: 451px) {
            /*通常都写 451,手机最大也就450px*/
            /*先隐藏手机菜单和按钮*/
            header .mobilMenu{
                display: none !important;
                /**CSS优先级问题解决方法:

                1.直接使用display: none !important;
                2.用谷歌开发者工具查看CSS优先级
                */
            }
            header > button  {
                display: none;
            }

            header{
                display: flex;
                /*里面的垂直居中*/
                align-items: center;
            }

            /*再把pcMenu写成flex布局*/
            header .pcMenu{
                display: flex;/*只要改为flex 里面的子项目就变成一行了*/
                margin-left: 20px;
                background: red;
            }
            header .pcMenu>li{
                margin-left: 20px ;
            }
        }

    </style>
</head>
<body>
<header>
    <div class="logo"></div>
    <button id="menu">菜单</button>
    <ul class="mobilMenu">
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
        <li><a href="#">导航4</a></li>
        <li><a href="#">导航5</a></li>
    </ul>

    <ul class="pcMenu">
        <li><a href="#">pc到航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
        <li><a href="#">导航4</a></li>
        <li><a href="#">导航5</a></li>
    </ul>
</header>
</body>
<script>
    $('#menu').on('click', function () {
        $('.mobilMenu').toggle();//toggle() 方法切换元素的可见状态。若是被选元素可见，则隐藏这些元素，若是被选元素隐藏，则显示这些元素。
    //缺点:若是使用toggle(),他会把display这个style的属性内嵌到放在html里.
    })
</script>
</html>

手机端要加一个meta viewport

历史缘由:最开始手机浏览器(苹果三)会在本身的三四百像素的手机上模拟980像素的显示效果,而后让用户本身去缩放,查看网页.

那么就告诉浏览器不要缩放个人网页,手机屏幕是多少像素,就显示多少像素的网页.使用下面的代码后端

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

name="viewport" :视口
content="width=device-width,宽度等于设备宽度,意思就是不要变成980,用设备宽度.
user-scalable=no, 用户是否能够缩放:不准缩放,由于我在代码里已经给用户适配好了
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
初始缩放倍数,最大缩放倍数,最小缩放倍数,都是1.0,即便不能缩放

这句话缩写语法:
mate:vp

总结这个meta做用:

防止手机页面模拟 980 像素宽度
防止页面在用户双击的时候放大
防止用户两指缩放页面

3.移动端的特色

3.1flex布局是专门给手机定制的

只要学会flex布局,手机端布局基本OK手机端的交互方式不同

3.2手机端的交互方式不同

没有 hover
有 touch 事件
如何监听滑动事件?记录两次滑动时候的坐标,相减,就能够了.
有封装的库,例如jquery swipe, vue里的插件
没有 resize
手机端的宽度永远跟设备宽度同样
没有滚动条
滚动条会隐藏,会变成一个指示器,跟PC端不同
没有ie,意思就是什么CSS属性均可以用,不用考虑兼容的问题

4.CSS3的calc()使用

连接:https://www.w3cplus.com/css3/...

平时在制做页面的时候，总会碰到有的元素是100%的宽度。众所周知，若是元素宽度为100%时，其自身不带其余盒模型属性设置还好，要是有别的，那将 致使盒子撑破。好比说，有一个边框，或者说有margin和padding，这些都会让你的盒子撑破。咱们换句话来讲，若是你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将会把元素盒子撑破（标准模式下，除IE怪异模式）。虽然前面介绍的CSS3属性中的box-sizing在必定程度上解决这样的问题，其实的 calc()函数功能实现上面的效果来得更简单。

移动端页面布局经常使用哪些属性？

display: flex
 width: calc(50% - 10px);