three

最新推荐文章于 2024-02-06 16:30:40 发布

前端黑

最新推荐文章于 2024-02-06 16:30:40 发布

阅读量330

点赞数

分类专栏：移动端

本文链接：https://blog.csdn.net/qq_38964133/article/details/89294226

版权

移动端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

复习

详细解说bfc张鑫旭网址如下

https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

在移动端使用css3尽可能的加兼容

流动布局 (百分比布局)

两栏自适应布局(布局方式)

响应式开发

比较适合新建的网站

####设备划分

运用到css中的媒体查询

通过查询screen的宽度来指定某个宽度的区间的网页布局

#####屏幕的分类

对的是某一类设备进行适配大概有四种

超小屏幕 768px以下手机此时页面的宽度100%

小屏设备 768px- 992px 设置版心 750px 小于768就可以

中等屏幕 992px-1200px 设置版心 950px 小于992就可以

宽屏设备 1200px 设置版心 1170px 小于1200就可以

响应式原理

这里的width都是容器的宽度

超小屏 width就100%

其余的版心需要小于的区间值的最小值

关于媒体查询 @media */
/*语法： @media screen and (max-width: 768px) and (min-width: 320px){属性样式}*/

@media screen and (max-width: 768px) {
        .container {
            background: yellow;
            width: 100%;
        }
    }
    
    @media screen and (min-width: 768px) and (max-width: 992px) {
        .container {
            background: blue;
            width: 750px;
            margin: 0 auto;
        }
    }
    
    @media screen and (min-width: 992px) and (max-width: 1200px) {
        .container {
            background: green;
            width: 950px;
            margin: 0 auto;
        }
    }
    
    @media screen and (min-width: 1200px) {
        .container {
            background: pink;
            width: 1170px;
            margin: 0 auto;
        }
    }

####描述bootstrap

上面这种写法太过于繁琐需要四套

当下最流行的ui框架

网址https://v3.bootcss.com/

主题有立体和平的在组件中的主题预览

前端开发资源库

https://www.awesomes.cn/

起步

基本模板

<!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明-->
<html lang="zh-CN">

<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染   ie的最高版本edge -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置： 视口的宽度和设备一致，默认的缩放比例和pc端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!--目的为了优先加载和解释-->
    <title>Bootstrap 101 Template</title>
    <!-- 引进Bootstrap -->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 是为了分别让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用  以http形式打开就可以支持 原因respond请求需要异步请求 -->
    <!--在ie9以下需要引进来-->
    <!--[if lt IE 9]>
      <script src="../lib/html5shiv/html5shiv.min.js"></script>
      <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../lib/jquery/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

normalize.css和reset.css

共同点：都是重置样式库，增强浏览器的表现一致性
不同点：
举个例子：ul
reset.css   list-style:none ---因为需求  会更改本身一致的元素 比如去掉li的点
normalize.css 不会重置ul样式 ---本身已经在每个浏览器表现一致的元素

一句话：都是增强浏览器的表现一致性但是normalize不会重置已经一致的元素

bootstrap为了增强跨域浏览器的一致性使用了 normalize.css

布局容器响应式和流式

在bootstrap的基本模板里使用下面的类就可以了

/*响应式布局容器*/
<div class="container"></div>
/*流式布局*/
 <div class="container-fluid"></div>

删格系统的使用

概念：就是行和列的布局方式

row 行

<div class="row"></div>

.container容器默认有15px的左右内间距

.row 填充父容器的15px左右内间距清内边距因为它有一个margin左右-15px相当于拉伸

如果自定义的类div 就不能填满

列 col-*-*
<!--列：col-*-*  *不确定（参数） -->
        <!--
            col：列样式
            第一个*：屏幕的大小
            大屏设备     lg   大屏设备以上生效包含本身
            中屏设备     md   中屏设备以上生效包含本身
            小屏设备     sm   小屏设备以上生效包含本身
            超小屏设备   xs   超小屏设备以上生效包含本身
            第二个*：每一行的分等份，默认分成12等份 ，数字代表的是占多少份
-->

<div class="row">
            <div class="col-lg-3"></div>
            <div class="col-lg-4"></div>
            <div class="col-lg-5"></div>
</div>
后面的份数代表的是占几份

引用的类默认也是没有样式

####删格系统开发响应式

运用这个进行响应式开发

<body>
    <!--
大屏设备   让div平均分成6等份
中屏设备   让div平均分成4等份
小屏设备   让div平均分成3等份
超小屏设备 让div平均分成2等份
-->
<div class="container">
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-4 col-sm-6"></div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-sm-6"></div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-sm-6"></div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-sm-6"></div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-sm-6"></div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-sm-6"></div>
        </div>
</div>

删格系统拓展嵌套列的偏移

#####嵌套

<div class="container">
        <div class="row">
            <div class="col-xs-4">
                <div class="row">
                    <div class="col-xs-6"></div>
                    <div class="col-xs-6"></div>
                </div>
            </div>
            <div class="col-xs-4"></div>
            <div class="col-xs-4"></div>
</div>

可以进行嵌套默认是0 没有高宽

#####列的偏移

col-xs-offset-3 向右偏移3份

<div class="col-xs-4">
                <div class="row">
                    <div class="col-xs-3"></div>
                    <div class="col-xs-6 col-xs-offset-3"></div>
                </div>
</div>

#####列的排序相当于css中的定位

col-xs-pull-9 往左方向移动  <---- 这个方向 往后

col-xs-push-3 往右方向移动  ----> 这个方向 往前

####响应式

.table-responsive将表格包裹在这个div里面 就可以实习那响应式表格

####浮动

pull-left向左浮动 pull-right向右浮动

这两个不能用于导航栏导航栏的浮动使用

.navbar-left 或 .navbar-right

响应式工具

.visible-xs-* .visible-md-*
.visible-sm-* .visible-lg-*
<!--
大屏设备    显示
中屏设备    隐藏
小屏设备    显示
超小屏设备  隐藏
-->
显示就加入对应的样式
.hidden-xs .hidden-sm
.hidden-md  .hidden-lg
加入样式设置对应隐藏
两种建议使用第二种就可以了

微金所–项目

顶部通栏布局

/*  +,~选择器   + 紧邻的下一个兄弟元素  ~ 后面所有的兄弟元素*/
可以用在给相邻的div加边框  + 紧邻的下一个兄弟有边框  自己没有

.wjs_topBar >.container >.row >div + div {
    border-left: 1px solid #ccc;
}

字体图标的使用

/*自定义字体图标*/
/*1.通过@font-face定义自己的字体*/
@font-face {
    /*2.申明自己的字体名称*/
    font-family: 'wjs';
    /*3.引入字体文件（约束某一段字符代码什么图案）*/
    src:
    url(../fonts/MiFie-Web-Font.svg) format('svg'),
    url(../fonts/MiFie-Web-Font.eot) format('embedded-opentype'),
    url(../fonts/MiFie-Web-Font.ttf) format('truetype'),
    url(../fonts/MiFie-Web-Font.woff) format('woff');
}
/*4.怎么使用维护性更好*/
.wjs_icon{
    font-family: wjs;
}
.wjs_icon_phone::before{
    content: "\e908";
}
.wjs_icon_tel::before{
    content: "\e909";
}

collapse使用

<button data-toggle="collapse" data-target=".box">切换</button>
    <div class="box">
        内容
        <br> 内容
        <br> 内容
        <br> 内容
        <br> 内容
        <br> 内容
        <br>
    </div>
    在bootstrap的模板  这样使用就可以完成切换
    data-toggle="collapse" 切换
    data-target=".box" 切换的目标 目标里面可以传id 类名等选择器
    还可以用a标签进行控制
    <a href=".box" data-toggle="collapse" >切换</a>
    这里的href也可以当作控制的目标选择器

aria-expanded="false"  aria-* 代表提供给屏幕阅读器使用() 默认不展开
class="sr-only"  screen read only 给屏幕阅读的
以后遇到类似的  都是同一个道理  可有可无  可以删掉

根据结构进行更改模板达到我们想要的分析其模板里面的结构

样式覆盖

找到相关的样式

比如 nav里面的样式可以找到nav-default这些样式在css里面所以引入样式的时候只需要将自己的样式引入bootstrap的样式后面实现覆盖就可以了

vertical-align: middle; 设置字体图标中线对齐  而不是基线对齐

使用套路

分析结构查找对应样式修改样式检查响应功能

轮播图

pc端高度固定平铺指的是中屏和大屏

移动端缩放

background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url('../images/slide_01_2000x410.jpg');
这两个属性可以让背景居中  并且铺满

####轮播图具体实现在案例里面

静态响应式轮播图

太浪费资源做动态资源获取

动态轮播图

优化按需加载 css实现不了

通过js进行实现

ui框架

/*ui框架：bootstrap,妹子UI,jqueryUI,easyUI,jqueryMobile,mui,framework7*/
/*关于移动端的UI框架：bootstrap,jqueryMobile,mui,framework7*/
/*模板引擎：artTemplate,handlebars,mustache,baiduTemplate,velocity,underscore

data.json 里面的数据如果直接在subline复制过去就会失效原因没有明确

可以用文件进行复制过去

{ list: data }  这是对象?

$(window).on('resize', function() {
        render();
 }).trigger('resize');
 trigger 函数会自动的触发一次resize这个事件  resize是页面尺寸发生改变事件
 自动触发后  也就触发了 render函数

Jq和原生js 轮播图做手势切换滑动切换不一样

两者一个是jq一个js方式的

上一个项目用到的技术是 js原生的滑动事件

jq没有 touch的那三个事件不能直接调用 e.touches

需要加入 originalEvent 写成 e.originalEvent.touches[0].clientX 这样才能获取就可以了

前端网站 https://www.html.cn/

前端黑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录