zoukankan      html  css  js  c++  java
  • 响应式开发---网页的布局方式、媒体查询、栅格化布局、less语言

    1、响应式开发介绍

      a、网页布局方式

        

      b、响应式布局

        

        优点:用一个页面适配不同终端的展示

        缺点:产生代码冗余,同时使网页体积变得很庞大,不会因为终端的改变而改变网页的体积,不同终端上有些没有显示出来的实际上也加载个渲染了只是看不到,但是那些资源都请求了,那对浏览页面速度和流量而言影响也很大,所以在移动端会带来性能问题

        

        

    2、媒体查询介绍和应用

        

        

        媒体查询用法

        1、第一种

          

        2、第二种

        

        

        

    3、bootstrap介绍

      css框架----组件框架----强大之处在于响应式布局(栅格化布局 )

      

        bootstrap框架

        

        

        

        bootstrap使用----bootstrap是基于jquery的css框架

          1、下载包

          2、使用

            a、设置meta,引入文件------搭建bootstrap运行环境

            

            b、运用组件

                不仅仅是简单的复制代码,你可以自己去修改样式,定制效果

            

        栅格化布局

          12等分  流式布局(放不下的自动换行) 

          

          

           

          其他的栅格样式

          

          

          

        设置元素是否在某一个屏幕下隐藏

        

        源码

        

    4、less语法

        

        

       

        less环境的安装和使用

        less里有工具把  .less文件编译解析生成一个对应的   .css文件

        less语法说明

          注释:

                                   

          变量:

            

          混入(函数):

            

          嵌套:用的最多的

            

            

            

       

  • 相关阅读:
    红蓝对抗之Windows内网渗透
    [框架漏洞]Thinkphp系列漏洞【截至2020-07-20】
    xss
    OWASP TOP 10 详解
    关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),encodeURI(),encodeURIComponent()
    用C#实现的几种常用数据校验方法整理(CRC校验;LRC校验;BCC校验;累加和校验)
    批处理(.bat)简单应用实例
    线状地物图斑化全流程作业(使用ArcMap软件)
    VS Code Remote配置
    二分查找
  • 原文地址:https://www.cnblogs.com/yangyutian/p/10999096.html
Copyright © 2011-2022 走看看