网页复制粘贴原理_Part 1 · HTML5 网页开发-04

最新推荐文章于 2021-10-26 09:33:51 发布

weixin_39570777

最新推荐文章于 2021-10-26 09:33:51 发布

阅读量396

点赞数

文章标签：网页复制粘贴原理网页缩放后元素位置

Part 1 · HTML5 网页开发-04

第四章、移动端网页应用开发及项目

第一节、移动端开发基础

1、移动web开发基础

常见的PC端浏览器（谷歌、360、火狐、搜狗、IE浏览器、百度等）注意：当用H5或CSS3的时候，基本不考虑低版本浏览器的兼容性问题了
常见的移动端浏览器（UC浏览器、QQ浏览器、百度手机浏览器、搜狗手机浏览器等注意 : 国内的UC和QQ、百度等手机浏览器都是根据Webkit修改过来的内核，国内还没有自主研发的内核
（移动端访问网址，网址前加个m，比如：m.jd.com 、m.taobao.com）总结：兼容移动端主流浏览器，处理Webkit内核浏览器就可以了
常见的移动端屏幕尺寸，可以参考：

https://material.io/devicesmaterial.io

移动端调试方法：

谷歌浏览器的模拟手机调试
搭建本地web服务器，手机和服务器在一个局域网捏，通过手机访问服务器
使用外网服务器，直接IP或域名访问移动端浏览器主要对webkit内核进行兼容
（移动端碎片化比较严重，分辨率和屏幕尺寸大小不一，开发只需要在意开发尺寸就好）

2、视口

视口（viewport）就是浏览器显示页面内容的屏幕区域

布局视口（layput viewport）
视觉视口（visual viewport）
理想视口（ideal viewport）对于设备来说，是最理想的视口尺寸，需要手动添加<meta>标签<meta>视口标签的主要目的：布局视口宽度应该与理想视口宽度一致，设备有多宽，布局视口就有多宽

<meta>标签

属性	解释
width	宽度设置的是viewport的宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比,大于0 的数字
user-scalable	用户是否可以缩放（yes或no,0或1）

写法：
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=0,minimun-scale=1.0,maximun-scale=1.0">

标准的viewport参数设置

视口宽度和设备保持一致
不允许用户自行缩放
视口的默认最小缩放比例为1.0
最大允许的缩放比例1.0

3、物理像素和物理像素比

物理像素点是指屏幕显示的最小颗粒，是物理真实存在的，是厂商在出厂的时候就设置好了的
物理像素比：一个px能显示的物理像素点个数

4、二倍图

在标准的viewport设置中，一般会使用倍图来提高图片质量，解决在高清设备中的模糊问题，（通常使用二倍图）

5、移动端开发的选项

常见的移动端开发：单独制作移动端页面、响应式兼容PC页面移动端
市场主流的选择(单独制作移动页面)

6、移动常见的问题解决方案

webkit 兼容
CSS初始化 normalize.css
官网地址：

http://necolas.githun.io/normalize.css/necolas.githun.io

移动端用CSS3盒模型

 box-sizing:border-box;
-webkit-box-sizing:border-box;

特殊样式（需要在初始化页面的时候加进去）

CSS3盒子模型

点击高亮我们需要清除

 *{
    -webkit-tap-highlight-color: transparent;
  }

移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式

input{
    -webkit-appearance: none;
  }

禁用长按页面时的弹出菜单

  img,a { -webkit-touch-callout: none; }

7、移动端技术选型

一、单独制作移动端页面（主流）

流式布局（百分比布局）流式布局只适合水平方向的布局，垂直方向需要用rem
flex弹性布局（强烈推荐）
less+rem+媒体查询布局
混合布局（流式、less、rem、媒体查询）

二、单独制作移动端页面（其次）

媒体查询
bootstrap

第二节、流式布局

1、流式布局原理

流式布局，就是百分比布局，也称非固定像素布局
通过把盒子的宽度设置成百分比，从而根据屏幕宽度来进行伸缩，不受不定像素的限制
流式布局是移动web项目比较常用的方式注意：
制作过程中，需要定义页面的最大和最小支持的宽度
max-width 最大宽度（max-height最大高度）
min-width 最小宽度（min-height最小高度）

2、移动项目初始化准备内容

首先添加 normalize.css
其次添加 index.css

index.css 里面添加特殊样式部分的内容，不用死记硬背，理解原理，复制粘贴

/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
*{
    -webkit-tap-highlight-color: transparent;
  }
  /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
  input{
    -webkit-appearance: none;
  }
  /*禁用长按页面时的弹出菜单*/
  img,a { -webkit-touch-callout: none; }

新增属性：设置垂直对齐

   vertical-align: middle; 设置图片水平居中

7、二倍精灵图做法

在firework里面把精灵图等比例缩放为原来的一半
然后根据新的大小测量坐标
然后代码里面的background-size设置为精灵图原来宽度的一半

9、线形渐变背景

MDN文档里面搜索 background-image
MDN文档官网 :

MDN Web Docsdeveloper.mozilla.org

例：

background-image: linear-gradient(0deg,#f1503b,#c82519 50%);

10、滑动轮播图布局

图片格式

dpg图片压缩技术
（京东自主研发推出的dpg图片压缩技术，可以节省用户近50%的浏览量，能兼容jpeg)
webp图片压格式
（谷歌研发的图片格式，压缩体积只有jpeg的2/3）

第三节、flex布局

1-2、布局体验布局原理

传统布局

兼容性好
布局繁琐
局限性，不能在移动端很好的布局

flex布局

操作方便，布局非常简单，移动端应用广发
PC端浏览器支持情况差
IE11或更低版本，不支持或者只有部分支持

建议

如果是PC端页面布局，还是使用传统布局
如果是移动端或者不考虑兼容性问题的PC端页面布局，还是使用flex弹性布局

flex布局原理

flex（flexible Box），意为弹性布局
当为父盒子设置为flex布局以后，子元素的float、clear、vertical-align（垂直对齐）属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素，称为flex容器，简称“容器”，它的所有子元素自动成为容器成员，成为flex项目，简称“项目”

flex属性值：
display：flex;

例如：

        div {
            display: flex;
            width: 400px;
            height: 100px;
            background-color: pink;
            justify-content: space-around; 设置主轴方向上子元素的排列方式
        }

        span {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin-right:10px ;
            flex: 1; 设置flex子项目占的份数

        }
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

3、 flex-direction 属性

flex-direction 用来设置主轴方向的
注意：主轴和侧轴类似于X轴和Y轴，但是主轴侧轴是可以变化的，侧轴随主轴的设定而变化，如果设置横向为主轴，那么纵向就为侧轴，如果设置纵向为主轴，那么横向就为侧轴

属性值	解释说明
row	主轴默认值从左到右
row-reverse	主轴从右到左
column	主轴从上到下
column-reverse	主轴从下到上

4、 justify-content 属性

justify-content 用来设置主轴方向上子元素的排列方式
注意：使用这个属性之前，一定要确定好主轴是哪个

属性值	解释说明
flex-start	默认值,如果主轴是X轴，则从左到右
felx-end	从尾部开始排列
center	在主轴居中对齐
space-around	平分主轴剩余的空间
space-between	先两边贴边，剩下的项目，平分主轴中间剩余的部分（重要）

5、 flex-wrap 属性

flex-wrap 用来设置子元素是否换行

属性值	解释说明
nowrap	默认值，不换行
wrap	换行

6、 align-items 属性

align-items 用来设置侧轴上子元素的排列方式（单行）
该属性是控制子项在侧轴上的排列方式
在子项为单项的时候使用

属性值	解释说明
flex-start	默认值，从上到下
flex-end	从下到上
center	挤在一起居中
stretch	拉伸

7、 align-content 属性

align-content 用来设置侧轴上子元素的排列方式（多行的时候有效）
注意：只能用于子项出现换行的情况下，单行是没有效果的

属性值	解释说明
flex-start	在侧轴头部开始排列
flex-end	在侧轴尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余的空间
space-between	子项在侧轴两边贴边，剩余子项再平分剩余空间
stretch	设置子项元素高度平分父元素高度

8、 flex-flow 复合属性

flex-flow 是复合属性，用来综合书写主轴方向flex-direction和是否换行flex-wrap
例如：
flex-flow:row nowrap;

9-10、flex布局子项常见属性

flex子项目占的份数
align-self控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）

flex属性
flex属性定义子项目分配父盒子的剩余空间，用flex来表示占有多少份
属性值为数字，数字为1时，表示占总份数中的1份，默认值是0
例：

.item{
  flex:2; (表示该子项目占有总份数中的2份)
}

align-self属性
align-self属性定义自己的排列对齐方式，针对个体设置排列方式，层叠前面设置的样式
order属性
order属性用来设置子项的排列先后顺序，数字越小，越靠前排列,默认值是0
注意：和z-index不一样，概念不同，不要混淆
例如：

.item{
  order:1;  设置order为1的子项，排列顺序在默认值0的子项的后面
}

第四节、less+rem布局

1-2、rem理解

流式布局和flex布局只能对宽度进行等比例放大缩小，rem不仅能针对宽度，还能针对高度

rem单位
rem(root em)是一个相对单位，类似于em ,em是参考父元素字体大小，rem是参考根标签html字号的大小

rem优势 (参考元素是html,一个页面只有一个html元素，所以可以实现整体控制)

3、媒体查询书写语法

媒体查询书写语法
媒体查询（Media Query）是CSS3的新语法

@media 可以针对不同的媒体类型和不同的屏幕尺寸定义不同样式

书写规范：

用@media开头，需要加@符号
mediatype媒体类型，mediatype的值（all用于所以设备、print用于打印机、screen用于电脑屏幕、平板电脑、智能手机等）
关键字：and、not、only、or
media feature 媒体特性，必须有小括号包含，media feature 媒体类型的值，暂时了解三个（width、min-width、max-width）

例如：

@media mediatype and | not | only (media feature) {
CSS-code；
}

在屏幕设备中，当屏幕大于或者等于800px的时候，背景色为粉色

@media screen an (min-width:80px) {
   bady{
      background-color:pink;
   }
}

4、媒体查询案例-背景变色

案例思路: 按照从小到大或者从大到小的思路

注意：为了防止混乱，习惯性按照从小到大来写，这样代码也更简洁

5、媒体查询+rem实现元素动态大小变化

定义html内元素的根大小，用媒体查询，定义宽度来缩放rem单位的元素值

6、媒体查询引入资源的方法

当设置的样式比较繁多的时候，可以直接在link里面判断媒体类型和媒体特性，然后引入CSS文件
例如：

<link rel="stylesheet" media="screen and (min-width:400px)" href="index.css">

7-8、CSS的弊端和解决方法

css是非程序式的语言，没有变量、函数等概念，没有计算能力，书写过程中冗余度比较高，不利于维护

为了解决这个问题，引入了less(Leaner Style Sheets)语言

less是一门css的扩展语言，也是css的预处理器
在css的语法基础上，引入了变量，运算以及函数等功能，简化了css的编写，降低css的维护成本

总结：less是一门css的预处理器，扩展了css的动态功能，可以用更少的代码做更多的事情

less中文网址:

Less 中文网lesscss.cn

常见的css预处理器：Sass、Less、Stylus

9-12、less的使用

less 变量
less 编译
less 嵌套
less 运算

less变量（变量是指没有固定的值，可以动态改变的
写法：
@变量名:赋值;

变量命名规范:

必须加@前缀
不能包含特殊字符
不能以数字开头
大小写敏感
例如：@color:pink;

变量使用规范:
直接使用，例：

body{
  color:@color;
}

2. less 编译
方法一：用node.js里面的less，使用cmd命令行，把.less文件转换成.css文件，再引用
方法二：vscode里面的easy less插件，写.less文件，保存后，自动生成.css文件，引用

3. less 编译嵌套
大结构里面嵌套小结构的写法，更清晰更美观
例:

.header{
  width:100px;
  height:100px;
  .logo{
    width:10px;
    height:10px;
  }
}

注意：如果遇见交集、伪类、伪元素选择器

当内层选择器前面没有&符号的时候，被解析为父选择器的后代
当有&符号的时候，就被解析为父元素自身或者父元素的伪类

4. less 运算

任何数字，任何颜色变量都可以参与运算，（+）（-）（*）（/）注意:
参与运算的两个数字，可以一个有单位，一个没有单位，最终计算结果的单位就是参与运算数字里面唯一的那个单位
参与运算的两个数字，两个都有单位，并且单位不同，最终单位取第一个数字的单位
less运算符的左右必须加空格（更美观，计算准确），如果没有空格，会计算错误,例如： 1px + 5em

13-14、适配原理+适配方案

原理：

让一些不能等比自适应的元素，达到设备尺寸发生改变的时候，等比例适配当前设备
使用媒体查询，根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小发生变化的时候，尺寸也变化，进而达到等比例缩放的适配

rem实际开发适配方案

按照设计稿与设备宽度比例，动态计算并设置html根标签的font-size大小（媒体查询）
css中，设计稿元素的宽，高，相对位置等取值，按照同比例换算为rem为单位的值

rem适配方案技术使用（市场主流）
方案1：less+媒体查询+rem
方案2：flexible.js (更简单)

15、苏宁项目

项目技术选型
方案：采用单独制作移动页面的方案
技术：布局采用rem适配布局（less+rem+媒体布局）
设计图：采用750px设计尺寸

16、用@import导入less文件

index.less文件里面引入其他的.less文件：

新建index.html
将其他.less文件引入到index.less里面
语法：
例如将common.less文件导入到index.less文件: @import "common"

24、适配方案2：flexble.js

引入flexble.js方法：

<script src="js/flexible.js"></script>

小技巧 ：如果不用less计算rem，可以用插件直接转换：
Vscode 将px转换成rem，安装ceerem插件即可

第五节响应式布局

1、响应式页面兼容移动端

媒体查询
bootstrap
响应式开发原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

2-3、响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素实现变化效果
原理就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，实现不同屏幕下，看到不同的页面布局和样式变化

平时响应式尺寸的划分

超小屏幕（手机，小于768px）:容器宽度设置为100%
小屏幕（平板，大雨等于768px）:容器宽度设置为750px
中等屏幕（桌面显示器，大于等于992px）:容器宽度设置为970px
大屏幕（大桌面显示器，大于等于1200px）:容器宽度设置为1170px
（也可以根据实际情况自己定义划分）

5、bootstrap

bootstrap简介：来自（Twitter），是目前最受欢迎的前端框架，bootstrap 是基于HTML、CSS和JavaScript的，使web开发更简洁

中文官网：

Bootstrap中文网www.bootcss.com

官网：

Bootstrapgetbootstrap.com

bootstrap优点：

标准化的html+css编码规范
提供了一套简洁直观强悍的组件
有自己的生态圈，开源框架，不断更新迭代
让开发更简单，提高了效率

6、bootstrap使用方法

注意：控制权在框架本身，使用者需要按照框架规定的某种规范使用它的样式库

bootstrap使用使用四部曲：

创建文件夹结构
创建html骨架结构
引入相关样式文件
书写内容
书写内容：

直接拿bootstrap预先定义好的样式来使用
修改bootstrap原来的样式，注意权重问题
明白它定义了哪些样式和这些样式能实现什么样的效果

7、bootstrap布局容器

bootstrap需要为页面内容和栅格系统包裹一个.container容器，它提供了两个作此用的类

1.container类

响应式布局的容器，固定宽度
超小屏幕（手机，小于768px）:容器宽度设置为100%
小屏幕（平板，大雨等于768px）:容器宽度设置为750px
中等屏幕（桌面显示器，大于等于992px）:容器宽度设置为970px
大屏幕（大桌面显示器，大于等于1200px）:容器宽度设置为1170px

2.container-fluid类

流式布局容器，百分比宽度
占据全部视口（viewport）的宽度
适合于制作移动端页面开发

例如:

    <div class="container">111</div>
    <div class="container-fluid">222</div>

8、bootstrap栅格系统

栅格系统（grid systems）,也称网格系统，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
bootstrap栅格系统也能实现响应式效果
移动设备优先使用

9、bootstrap栅格系统使用方法

栅格选项参数
栅格系统用于通过一系列的行（row）和列（column）的组合来创建页面布局，内容直接放进这些创建好的布局中

	超小屏幕（手机）<768px	小屏设备（平板）>=750px	中等屏幕>=992px	宽屏设备>=1200px
.container最大宽度	自动100%	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12	12	12	12

按照不同的屏幕划分为1-12等份

xs-extra small 超小
sm-small 小
md-medium中等
lg-large大

列如果总数大于12，多余的列所在的元素将被作为一个整体另起一行排列
可以同时为一列指定多个设备的类名，以便划分不同的分数，例如class="col-md-4 col-sm-6"

10、列嵌套

一行一列里面的子元素可以再嵌套一个row,分成12列
只要有元素的地方，有父子关系的，都可以在父级设置一个row,添加栅格
例如：

  <div class="col-4 row">
     <p class="col-lg-6"> 1 </p>
     <p class="col-lg-6"> 2 </p>
  </div>

11、列偏移

使用.col-md-offset- * 类可以将列向右侧偏移，这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）
例如：row里面的右侧元素向右偏移4个栅格

<div class="row">
   <div class="col-lg-4 ">左侧</div>
   <div class="col-lg-4 col-lg-offset-4">右侧</div>
</div>

12、列排序

.col-md-push- *往右推
.col-md-pull- *往左拉

通过这两个类可以改变列（column）的顺序

12、bootstrap响应式工具

为了加快对移动设备友好的页面开发，利用媒体查询功能，并且使用这些工具类可以方便针对不同设备展示或者隐藏页面内容

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

与之相反的，visible-xs、visible-sm、visible-md、visible-lg 是针对不同设备显示某个内容

bootstrap其他，参考bootstrap文档

weixin_39570777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页复制粘贴原理_Part 1 · HTML5 网页开发-04

Part 1 · HTML5 网页开发-04第四章、移动端网页应用开发及项目第一节、移动端开发基础1、移动web开发基础常见的PC端浏览器（谷歌、360、火狐、搜狗、IE浏览器、百度等）注意：当用H5或CSS3的时候，基本不考虑低版本浏览器的兼容性问题了常见的移动端浏览器（UC浏览器、QQ浏览器、百度手机浏览器、搜狗手机浏览器等注意 : 国内的UC和QQ、百度等手机浏览器都是根据Webkit修改...
复制链接

扫一扫