zoukankan      html  css  js  c++  java
  • 网页的自适应设计与背景居中

    这里提供三种网页自适应的方法:

    方案一:用比例控制大小

    <head>标签里写入

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    以下是相关的属性的解释:

    1. width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)
    2. height:和 width 相对应,指定高度
    3. initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例,1.0就是占网页的100%
    4. maximum-scale:允许用户缩放到的最大比例
    5. minimum-scale:允许用户缩放到的最小比例
    6. user-scalable:用户是否可以手动缩放

    然后网页内的所有元素的大小,位置都用%去写,不能用px等,显然比较蛋疼的一种方法。

    方案二:使用媒体查询

    这里会用到css3的@media,可以根据查询媒体的分辨率,针对不同的分辨率写不同的css,在执行时会自动识别来执行不同css样式,也比较繁琐。

    举个例子,当浏览器窗口小于 500px 时,背景变为蓝色:

    @media only screen and (max- 500px) {
        body {
            background-color: blue;
        }
    }
    

    方案三:定义div大小来限定

    在写的所有元素外面套一个div块,规定min-width和min-height,这样在浏览器缩小尺寸的时候布局就不会乱掉。当然也要注意,这时候设计所有元素时参照的的最大的父元素就不能看body了,得看你用的div这个块的大小。(简单易实现,但并没有实现真正的自适应!)

    例如:

        div{       
    min- 1920px; min-height: 1080px;
    }

    最后:

    提供一种可以实现背景居中和网页的元素位置居中的参考,即使改变浏览器尺寸,背景及其中元素依然可以不变位置。用到了绝对定位

    //在定义最大的块div或body时
    .div{ position: absolute; 想要的网页背景宽度; height: 想要的网页背景长度; top:0; left:50%; margin-left:-(想要的网页背景宽度的一半) ; //关键 }
  • 相关阅读:
    Objective-C学习笔记2013(Category 扩展(类目)/分类)(4)
    Objective-C学习笔记(static,self,super)
    Objective-C学习笔记2013(3)[NSArray]数组[在可变数组中,加用add减用remove]
    Objective-C学习笔记2013(2)[NSNumber]
    C语言II博客作业04
    C语言II博客作业03
    C语言II博客作业02
    C语言II博客作业01
    C语言学期总结
    第一次作业
  • 原文地址:https://www.cnblogs.com/xiaxiaopi/p/12332175.html
Copyright © 2011-2022 走看看