• 关于BootStrap的相关介绍


    一、Bootstrap

        Bootstrap的官网:www.bootcss.com

    1.响应式布局

       Responsive web page 响应式/自适应的网页

       可以根据浏览器设备的不同(pc,pad,phone)

       自动调用对应的布局,图片,文字效果,从而不会降低用户体验。

    2.响应式网页必须做到的前提

    1.布局:不能固定宽度,必须是流式布局(尽量少用定位,可以浮动)

    2.文字和图片,大小随着容器大小而改变 em rem

    3.媒体查询技术

    响应式页面存在的问题:

        • 页面的复杂度极大的增加
        • 只适用用内容不多的页面(企业的官网,门户网站)
        • 媒体查询技术属于h5/c3的技术

    boot把媒体查询这件事封装了,不需要我们自己写了

    3.如何测试响应式页面

    1.使用真实设备测试

    • 好处:真实、可靠
    • 缺点:测试任务量巨大

    2.使用的第三方的模拟测试软件

    • 好处:无需添置太多真实设备,测试方便
    • 缺点:测试效果有限,有待进一步验证

    3.使用浏览器自带的模拟器测试

    • 好处:简单方便
    • 缺点:测试效果有限,有待进一步验证

    4.如何编写响应式布局

    1.在元数据标签中定义viewport---视口

    name="viewport"

    content 设置能够允许网页进行操作

    width=device-width 表示视口宽度就是设备宽度

    initial-scale=1.0 表示视口宽度是否可以缩放 1.0不能缩放

    maximum-scale=1.0 允许缩放的最大倍率

    user-scalable=0 是否允许用户手动缩放 yes/no/1/0

    一般的设置:

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

    2.所有内容/文字/图片,相对尺寸,不能使用10px这种绝对的值。

    3.流式布局+弹性布局,在搭配媒体查询技术来完成响应式布局

       float flex

    4.使用css3 Media Query 技术做响应式网页

    Media:媒体,只浏览网页的设备。如:screen(pc/pad/phone) tv print

    Media Query:媒体查询,可以自动根据当前浏览器设备的不同(尺寸,解析度,方向不同),

    有选择指定一部分CSS而忽略其他部分的CSS.

    根据媒体查询的结果,执行同一个css文件下的不同代码块。

    @media screen and (min-768px) and (max-991px){

        选择器{样式}

    }

  • 相关阅读:
    samba linux windows 请联系管理员
    centos chrome
    centos6.5 中文
    Hibernate 中update hql语句
    嵌入式Linux应用程序开发环境搭建记录
    JDK-windows7环境变量配置-亲测版本 以及HelloWorld
    windows tcp端口映射或端口转发
    VMWare Workstation:局域网PC连接虚拟机里的远程桌面或端口
    正则提取文本中的颜色值 #xxxx,不严谨版本
    Python 2.7.3 urllib2.urlopen 获取网页出现乱码解决方案
  • 原文地址:https://www.cnblogs.com/sna-ling/p/11620333.html
Copyright © 2020-2023  润新知