只有想不到,哪有做不到,博达网站群全媒体网站群V2网站建设制作设计中PC端和手机端响应式构架如何设计

时间：2023-03-24 作者：新势力科技 阅读数：172

只有想不到,哪有做不到,博达网站群全媒体网站群V2网站建设制作设计中PC端和手机端响应式构架如何设计

响应端设计常用参数列举如下:

@media only screen and (min-width: 412px) and (max-width: 915px) {}

@media only screen and (min-width: 412px) and (max-width: 883px) {}

@media only screen and (min-width: 360px) and (max-width: 760px) {}

@media only screen and (min-width: 360px) and (max-width: 740px) {}

@media only screen and (min-width: 360px) and (max-width: 800px) {}

@media only screen and (min-width: 384px) and (max-width: 854px) {}

@media only screen and (min-width: 375px) and (max-width: 812px) {}

@media only screen and (min-width: 414px) and (max-width: 896px) {}

@media only screen and (min-width: 390px) and (max-width: 844px) {}

@media only screen and (min-width: 393px) and (max-width: 851px) {}

@media only screen and (min-width: 428px) and (max-width: 926px) {}

@media only screen and (min-width: 375px) and (max-width: 667px) {}

@media only screen and (min-width: 360px) and (max-width: 640px) {}

@media only screen and (min-width: 411px) and (max-width: 731px) {}

@media only screen and (min-width: 320px) and (max-width: 568px) {}

@media only screen and (min-width: 414px) and (max-width: 736px) {}

  1. 使用@media条件（min-width: 768px）判断当浏览器的宽度小于768px值时，改变样式。

  2. 宽度使用百分比，尽量少使用绝对值宽度。

    div{width：xxx px}

    div{
        width:100%;
        //或者
        width:auto;
    }

  3. 字体的设置相对大小

    p{font-size: 1.5em}

  4. 流动布局（fluid grid）

    .leftDiv{
        float: left;
        width: 70%;
    }
    .rightDiv {
        float: right;
        width: 25%;
    }

上一篇：博达网站群全媒体v2博达网站群网站建设制作中首页大图banner轮换焦点图轮换代码

下一篇：博达网站群网站建设制作设计中ps抠图后有白边怎么处理