东莞市建设网站,盐城企业网站制作,直播网站建设,qq网页版一键登录1.移动端基础
1.1 浏览器现状
PC端浏览器
360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器#xff08;停止服务#xff09;、搜狗浏览器、IE浏览器
移动端浏览器
UC、QQ浏览器、欧朋浏览器、百度手机浏览器、360、搜狗、猎豹、谷歌等其他手机自带的浏览器
国…1.移动端基础
1.1 浏览器现状
PC端浏览器
360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器停止服务、搜狗浏览器、IE浏览器
移动端浏览器
UC、QQ浏览器、欧朋浏览器、百度手机浏览器、360、搜狗、猎豹、谷歌等其他手机自带的浏览器
国内尚无自主研发的浏览器内核就像国内的手机操作系统都是基于android 修改开发一样
总结兼容移动端主流浏览器处理webkit 内核浏览器即可
1.2 手机屏幕现状
移动端屏幕尺寸非常多、碎片化严重Android设备有多种分辨率480X800、480X854、540X960、720x1280、1080x1920还有2K、4K屏近年来 iphone 的碎片化也加剧了其设备主要分辨率有 640x960、640x1136、750x1334、1242x2208作为前端开发人员无需关注这些分辨率因为我们常用尺寸为 px逻辑像素
1.3 常见移动端屏幕尺寸
参考 https://www.material.io/resources/devices/ 作为前端开发不要去纠结 dp、dpi、pt、ppi 等单位因为我们不是做原生开发的
1.4 调试方法
chrome DevTools 模拟手机搭建本地web服务手机和服务器在一个局域网内通过手机访问服务器使用外网服务器直接IP或者域名访问
2. 视口
布局视口
视觉视口
理想视口
2.1 为什么使用视口
移动开发兴起后出现的概念
也就是说如果我们开发的页面只需要适应PC端则不用考虑视口的概念
看下面的代码并没有对视口进行配置
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle.box{width: 300px;}/style
/headbody
img classbox src./3.jpg alt
/body/html在PC端的表现和在手机端的表现分别如下 原因在于我们在手机端浏览中渲染此页面时手机设置了视口为980而我们手机屏幕的宽度为 375默认情况下PC上的内容是无法在手机端显示完整的会出现横向滚动条
手机上的浏览器一般不会允许出现这个横向滚动条所以都会对内容进行缩放也就是原来需要在980px 上显示的内容缩放到375px 上就能够展示你们页面中的所有元素就都要进行等比例的缩放
所以在我们看来图片变小了
2.2 设置视口宽度
解决方法设置视口
设置固定宽度
作用是覆盖默认980的设置而是自己设置
meta nameviewport contentwidth375再看一下手机端的表现 此时图片大小与PC端就一致了
原因在于设置了视口宽度与设备宽度一致也就是1:1 的关系则页面内容不会缩放图片也就按照原来设置的尺寸展示
试实设置视口为750px 看看什么效果说说为什么
使用设备宽度
不同设备的宽度不一样为了更好的适配不同的设备可以使用下面的设置
meta nameviewport contentwidthdevice-width2.3 设置缩放比
删除上面的代码实时下面的代码 meta nameviewport contentinitial-scale1效果相当于
meta nameviewport contentwidthdevice-widthinitial-scale 的值也可以设置为其他倍数
2.4 用户缩放
上面的 initial-scale 和 width 都是开发人员设置的页面初始化的缩放设置
下面是对用户对页面缩放的控制
很多时候我们不希望用户缩放页面进而导致将我们的布局搞乱可以使用下面的配置 user-scalableno 完整配置
meta nameviewport contentinitial-scale1,user-scalableno此时用户就无法在浏览中进行页面的缩放
当然也可以使用下面的配置替代 user-scalabel
meta nameviewport contentinitial-scale1,minimum-scale1, maximum-scale1为了兼容性规范的写法是都写上
2.5 完整写法
结合前面所讲的所有只是viewport 的完整写法如下
meta nameviewport contentwidthdevice-width,initial-scale1,user-scalableno,minimum-scale1, maximum-scale12.6 通过 js 获取视口尺寸
可以通过下面的几种方法获取视口的宽度注意这里获取的是逻辑像素
console.log(window.innerWidth)
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.getBoundingClientRect().width)为了更好的兼容性更推荐下面的写法
var clientWidthwindow.innerWidth||document.documentElement.clientWidth||document.documentElement.getBoundingClientRect().width可以通过下面的代码获取物理像素
console.log(screen.width)可以通过如下方法获取像素比dpr
console.log(window.devicePixelRatio)可以通过开发者工具显示出dpr
3. 像素
本节涉及的知识点
分辨率、物理像素、CSS 像素、设备像素比(dpr)、标清屏和高清屏、缩放、PPI/DPI
3.1 物理像素 手机屏幕横向有828个点
手机屏幕纵向上有1792个点
同等大小屏幕下点越多、图像显示越精细
上面所说屏幕上一个个点就是物理像素physical pixel
物理像素也叫设备像素dp:device pixel 可见每个像素就是一个点每个点由红绿蓝三原色组成只需要控制每个点每种颜色的明暗就可以显示不同的颜色
实际开发中使用物理像素吗
看下面的例子
同等屏幕大小的两个手机
一个横向有2个物理像素一个有4个物理像素
如果使用物理像素则很明显展示的效果不一样在高清屏幕下可能图片会显示的很小设置都会看看不清楚 也就是说在实际开发中我们使用设备的物理像素
3.2 CSS 像素 CSS 像素也叫逻辑像素logical pixel
也成为 设备独立像素dip:divice independent pixel
我们在开发当中使用的就是CSS像素
.box { width: 1000px; height: 500px; } CSS像素与物理像素的关系
mark
在标清屏下1个css像素使用1个物理像素展示 在高清屏下1个css像素使用4个物理像素表示 注意高清屏下4个点相当于标清屏下1个点的大小所以说在高清屏下1个css像素使用4个物理像素表示
点越多展示的越精细想想灯带。。。。
浏览器会根据当前设备屏幕自动换算出1个CSS像素使用多少个物理像素表示
3.3 设备像素比 设备像素比dpr:device pixel ratio
dpr设备像素/CSS 像素缩放比是1的情况下
所以上面两种屏幕下的 dpr 分别为
mark
dpr2 表示的1个css 像素使用 2X2 个设备像素绘制
注意计算时指的是1个方向上横向或者纵向
所以 dpr1 的我们都可以认为是高清屏
3.3.1 二倍图 对于一张50px * 50pxcss像素的图片在手机 Retina 屏中打开按照上面介绍的物理像素比会放大倍数这样会造成图片模糊 在标准的viewport 设置中使用倍图来提高图片质量解决在高清屏设备中的模糊问题 通常使用二倍图因为在 iphone6\7\8 的影响但是现在还存在3倍图、4倍图的情况这个看实际开发公司需求 背景图片注意缩放问题 具体解决方案
准备一张100 * 100 的图片但是通过css 将其设置成50 * 50在高清屏上会将其放大2被变成 100 * 100因为图片背身就是100 * 100所以不会失真
需要注意的是一定将其设置成50 * 50否则会将其放大成200 * 200仍然会失真
Document 背景图片也采用同样的方式准备的应该是北京尺寸2倍的图片然后通过 background-size 将其设计成1倍
如何快速起初2倍图、3倍图别忘了我们PS中的切图神器
Document 总结 准备的图片是开发尺寸的2倍或者其他倍数
3.4 缩放 缩放改变的是CSS像素毕竟我们没有法力
放大
mark
缩小
3.5 PPI 每英寸的物理像素点见图1
ppi:pixels per inch可以根据勾股定律进行英寸
注意因为手机不是正方形的所以 6.1英寸只是大约值实际计算时可以使用 6.06
dpi:dots per inch
移动端开发选择 4.1 主流方案 单独制作移动端页面主流一般在域名前面加上 m可以打开移动端如果是移动设备能够自动判断也就是说同各国检测时PC设备还是移动设备响应不同的页面 响应式页面兼容移动端其次根据屏幕的宽度来改变样式。缺点制作麻烦、需要花很大精力去调兼容性问题移动端技术解决方案 5.1 移动端浏览器 移动端浏览器基本以 webkit 内核为主因此只需要考虑 webkit 兼容性即可
可以放心使用 H5 和 CSS3 的新特性
同时浏览器的私有前缀只需要添加 webkit 即可
mark
5.2 CSS 初始化 normalize.css
保护了有价值的默认样式 修复了浏览器的bug 模块化的 拥有详细的文档 http://necolas.github.io/normalize.css/
5.3 CSS3 盒子模型 box-sizing 设置盒子的尺寸以内容为准还是边框为准
传统模式宽度计算盒子宽度 CSS 中设置的 borderwidthpadding
CSS3 盒子模型盒子宽度CSS 中设置的width 里面包含了 border 和 padding
也即是说 CSS3 盒子模型中padding 和 border 的设置不会撑大盒子了
注意移动端可以全部使用CSS3盒子模型PC端如果需要兼容使用传统模式不考虑兼容使用CSS3 盒子模型
Document 5.4 特殊样式 有些元素到了移动端会有一些默认的特殊样式我们建议将这些样式去除
点击超链接时会有背景高亮效果建议去除 按钮会有默认样式建议去除 图片、超链接等长按会弹出菜单建议去除兼容性很不好 a { /* 去除超链接点击时的背景高亮效果 / -webkit-tap-highlight-color: transparent; } / 禁用长按显示菜单 */ img, a { -webkit-touch-callout: none; } /去除按钮的默认样式然后才可以为按钮自定义样式/ button, input { -webkit-appearance: none; } 6. 移动端常见布局 6.1 移动端技术选型 首先从下面两种方案中选择一种
单独制作移动端页面主流
流式布局百分比布局 flex弹性布局强烈推荐 lessrem媒体查询布局 混合布局 响应式页面兼容移动端
媒体查询 bootstrap 6.2 流式布局 流式布局就是百分比布局也称作非固定像素布局 通过盒子的宽度设置城百分比来根据屏幕的宽度进行伸缩不受固定像素的限制内容向两侧填充 流式布局时移动web开发使用的比较常见的布局方式
Document 6.3 流式布局项目 6.3.1 创建项目结构 mark
6.3.2 初始化主页 引入 normalize.css 引入 index.css 编写视口 淘淘首页 6.3.3 初始化body 在 index.css 中编写代码
参考京东移动端代码
mark
6.3.4 头部布局 mark
京东头部可以分为4个部分 通过查看京东官网发现百分比分别为 8%、10%、57%、25% 第4部分的颜色与其他部分的背景颜色不一致 html中添加头部 8105725 编写css样式
在 index.css 中编写样式
/* 头部样式 */ .app{ width: 100%; height: 45px; } .app ul{ margin: 0; padding: 0; list-style-type: none; } .app li{ float: left; height: 45px; background-color: #333333; } .app li:nth-child(1){ width: 8%; } .app li:nth-child(2){ width: 10%; } .app li:nth-child(3){ width: 57%; } .app li:nth-child(4){ width: 25%; background-color: #f63515; } 填充内容
第一部分是一个关闭图标尺寸为1010 第二部分为网站Logo尺寸为3030 第三部分和第四部分文字为白色 头部所有文字和图片都是水平居中且垂直居中对齐 注意图片无法通过设置行高等于高度的方式居中对齐 修改 index.html 中的 header 中的代码
mark
修改 index.css 中的代码
mark
mark
6.3.5 搜索制作 通过观察京东发现如下几点
搜索分为三部分 左侧展开折叠按钮尺寸固定不要使用百分比 右侧登录按钮尺寸固定不要使用百分比 中间搜索框会随着屏幕大小的调节而进行缩放 技术实现
搜索区域高度为44px 左右两侧按钮宽高都为40*44且分别做固定在左边和固定在右边需要使用绝对定位 中间搜索区域白色背景圆角高度为30pxmargin-left 和 margin-right 分别为50px 布局
在 index.html 中加入如下代码 在 index.css 中加入如下代码
mark
制作左侧和右侧
左侧和右侧相对简单所以先制作这两部分
html 代码
mark
css 代码
mark
制作放大镜
京东上使用的是二倍精灵图所以使用起来要遵循下面步骤
将精灵图等比例缩小一半 之后根据大小测量坐标 注意代码里面background-size也要写成精灵图原来的一半 html 代码
mark
css 代码
mark
制作输入框
html 代码
mark
css 代码
mark
6.3.6 焦点图 html 代码
mark
css 代码
mark
不要忘了将 search-box 盒子的定位修改为 固定定位且 宽度设置为 100%
mark
6.3.7 活动区域 html 代码
mark
css 代码
mark
6.6.8 类别区域 html 代码 京东超市 数码家电 京东服饰 京东生鲜 京东到家 京东超市 数码家电 京东服饰 京东生鲜 京东到家 css 代码
mark
flex 布局 7.1 传统布局与flex布局 传统布局
兼容性好 布局繁琐 局限性对移动端的支持不好 flex 唐兴布局
操作方便布局极为简单移动端应用广泛 PC段浏览器支持情况较差 IE11或更低版本不支持或仅部分支持 建议
PC端页面使用传统布局 移动端页面或者不考虑兼容性问题的PC段页面布局使用flex 弹性布局 7.2 爱的初体验 html 代码 10 20 30 css 代码
mark
加入flex
为 div 加入如下 css 样式
mark
运行结果
mark
总结
在为div设置 display:flex 之前span元素的 displayinline 在为div设置 display:flex 之后span 元素的displayblock所以高度生效但是因为宽度没有设置故为内容宽度 可见通过为父元素设置 display:flex 子元素无论原来是什么元素都会变成 block但是宽度并不会占据父元素的100%而且也不会独占1行 设置固定宽度
可以为span元素设置宽度
span{ width: 100px; height: 100px; background-color: #fff; } 设置后宽度会生效但是当调整浏览器宽度默认情况下span的宽度仍然会压缩
设置对齐方式
在 div 中加入如下代码
mark
运行结果
mark
设置平分
也可以不设置固定宽度而是使用如下代码
span { /* width: 100px; */ flex: 1; height: 100px; background-color: #fff; } 此种设置三个span元素将会评分父元素的宽度
mark
7.3 布局原理 flexflex box 的缩写
意为 弹性布局用来为盒状模型提供最大的灵活性任何一个容器都可以指定为 flex但是我们不会变态到将 i 标签指定为 flex
当我们将父盒子设置为flex后子元素的float、clear、vertical-align 属性失效 采用Flex布局的元素成为Flex容器(flex container)简称“容器”它的所有子元素自动成为容器成员成为Flex项目(flex item)简称“项目”
子元素可以横向排列也可以纵向排列
mark
布局原理总结
通过给父盒子添加flex属性来控制子盒子的位置和排列方式
7.4 容器常用属性 一下属性用于设置容器也就是父盒子
felx-direction设置主轴的方向也就是项目横向排列还是纵向排列 justify-content设置主轴上的子元素的排列方式 flex-wrap设置子元素是否换行 align-content设置侧轴上子元素的排列方式多行 align-items设置侧轴上的子元素排列方式单行 flex-flow复合属性相当于同时设置了flex-directon 和 flex-wrap 7.4.1 flex-direction 在flex布局中分为主轴和侧轴
默认情况下水平方向为主轴水平向右垂直方向为侧轴垂直向下
mark
flex-direction 属性可以改变默认的主轴设置
设置行为主轴
设置水平方向为主轴项目从左向右排列
body { background-color: #ccc; }
div { display:flex; /设置容器的主轴为X轴也就是行为主轴此值为默认值/ flex-direction: row; width: 800px; height: 400px; background-color: #000; }
span { width: 100px; height: 100px; background-color: #fff; border: 1px solid black; } 设置主轴反转
反转主轴
设置水平方向为主轴项目从右向左排列
只需要将如下代码
flex-direction: row; 修改为
flex-direction: row-reverse; 设置列为主轴
设置主轴为垂直方向项目从上到下排列
设置 flex-direction 的值 column
flex-direction: column; 将上面的代码改为
flex-direction: column-reverse; 项目从下到上排列
总结
主轴不是固定的 项目永远沿主轴排列所以设置主轴为水平方向项目1行排列设置主轴为垂直方向项目1列排 7.4.2 justify-content 设置主轴上项目的排列方式
使用此属性之前要确定主轴是哪一个主轴不一样设置的值也不一样
flex-start 默认值从头部开始如果主轴是x轴则从左到右 flex-end 从尾部开始排列如果主轴是y轴则从又到左 center 在主轴居中对齐如果主轴是x轴则水平居中 spance-around 评分剩余空间 spance-between 先两边贴边再评分剩余空间 7.4.2.1 X轴为主轴时 flex-start
body { background-color: #ccc; }
div { display:flex; /设置容器的主轴为X轴也就是行为主轴此值为默认值/ flex-direction: row; /* 设置项目从左到右排列 */ justify-content: flex-start; width: 800px; height: 400px; background-color: #000; }
span { width: 100px; height: 100px; background-color: #fff; border: 1px solid black; } mark
这与没设置 justify-content:flex-start 没有区别
修改 justiry-content 的值为 flex-end
flex-end
/* 设置项目从左到右排列 */ justify-content: flex-end; mark
注意这里仅仅是改变了项目的起始方向并没有改变项目的排列顺序而我们上面说的 flex-direction 的翻转会改变项目的排列顺序
将 justify-content 的值设置为 center所有元素居中显示两边编剧一致
center
justify-content:center; mark
spance-around
justify-content:space-around; 问题为什么明明是评分剩余空间项目的中间距离看起来是左侧两侧边距的2倍
mark
注意
容器-所有项目宽度之和就是主轴上剩余的空间这里的平分是指项目之间的距离平分这些空间 如果设置项目的flex:1而不是设置项目的固定宽度那么无论 justify-content 的值设置为什么都没有效果因为项目会自动占满整个容器宽度 space-between
justify-content:space-between; mark
7.4.2.2 Y 轴为主轴 省略
7.4.3 flex-wrap 传统布局中设置子盒子浮动后如果1行占不下会自动另起一行
但是在 flex 布局中则不然
html 代码 10 20 30 40 css 代码
body { background-color: #ccc; }
div { display:flex; /设置容器的主轴为X轴也就是行为主轴此值为默认值/ flex-direction: row; /* 设置项目从左到右排列 */ justify-content:flex-start; width: 500px; height: 400px; background-color: #000; } span { width: 150px; height: 100px; background-color: #fff; border: 1px solid black; } 我们发现当1行站不下所有项目时会自动缩小项目的宽度
如果不希望改变宽度而是另起一行只需要在容器中据加入如下设置即可
flex-wrap: wrap; mark
问题为什么两行之间的垂直间距这么大
扩展
如果主轴为Y轴则效果如下
mark
7.4.4 align-items 设置项目在侧轴上的排列方式
但是此属性适合项目为单行时
侧轴默认是Y轴当然可以改变
flex-start 默认值从上到下 flex-end 从下到上 center 挤在一起居中 stretch 拉伸 7.4.4.1 解决的问题 当前只能通过 justify-content 设置项目在主轴上的位置
div { display:flex; /设置容器的主轴为X轴也就是行为主轴此值为默认值/ flex-direction: row; /* 设置项目从左到右排列 */ justify-content:center; width: 500px; height: 400px; background-color: #000; } mark
无法设置项目在侧轴上居中对于当前来说侧轴是y轴那么也就是设置垂直居中
有人可能想到做如下修改
flex-direction: column; 但这样只是修改了主轴为y轴
mark
当前属性就是用来解决这个问题的
7.4.4.2 设置侧轴居中 只需要在容器中加入
mark
效果
mark
问题如果主轴为y轴呢
mark
效果
mark
当然此属性的只也可以设置为其他几个
其他几个值都比较简单稍微需要注意的是 stretch 意思是拉伸如果主轴是x轴那么就会拉伸项目的高度与父元素一样高但是项目不能设置固定高度否则无效
7.4.5 align-content 设置侧轴上的子元素的排列方式
这与 align-items 相似区别在于此属性用来设置多行项目也就是项目换行时的排列方式在单行项目下时没有效果的
flex-start 默认值在侧轴的头部开始排列 flex-end 在侧轴的尾部开始排列 center 在侧轴的中间显示 space-around 子项在侧轴评分剩余空间 spacebetween 子项在侧轴先分布在两头再平分剩余空间 stretch 设置子项元素高度平分父元素 flex-start
mark
思考主轴为y轴时如何排列
flex-end
mark
center
mark
space-around
mark
space-between
mark
**align-items 和 align-content 对比
align-items 适用于单行情况下只有上对齐下对齐居中和拉伸 align-content 适用于多行单行下无效可以设置对上对齐、下对齐、居中、拉伸一级平分剩余空间等 7.4.6 flex-flow flex-direction 和 flex-wrap 的复合属性
flex-flow: column nowrap; 7.5 项目常见属性 flex 项目占的份数 align-self 控制子项自己在侧轴的排列方式前面的align-items 和 align-content 是对所有子项应用相同的排列方式而这个属性是对单个子项应用个性化的排列方式 order 定义项目的排列顺序前后顺序 7.5.1 flex 定义子项目分配剩余空间用 flex 属性表示占多少分
分配的容器的剩余空间会增加到元素的宽度上 项目一旦设置固定宽度就不会参与分配剩余空间 flex 的默认值为00就表示不参与分配剩余空间 项目一旦设置了flex就不能再设置固定宽度 如果flex 的值为其他数字则表示在分配剩余空间时所占的分数 圣杯效果
Document 10 20 30 按比例分配
Document 10 20 30 7.5.2 align-self
Document 10 20 30 7.6 flex 布局项目 7.6.1 创建项目结构 mark
7.6.2 初始化主页 mark
7.6.3 编写body样式 body { max-width: 540px; min-width: 320px; margin: 0 auto; background: #fafafc; /* 去除横向滚动条 / overflow-x: hidden; / 去除移动端中超链接点击时的背景高亮效果 */ -webkit-tap-highlight-color: transparent; } 7.6.4 布局分析 很多元素的高度都是固定的不会随着窗口的变化而变化
7.6.5 搜索区域 固定定位 宽度设置为100%因为设置为固定定位后盒子成为inline-block 设置最大宽度、最小宽度因为固定定位的元素的父元素是窗口不是body所以在body中设置的最大宽度、最小宽度、以及宽度搜索盒子都不会继承必须单独设置 水平居中的两种方式 CSS3属性的兼容性写法 html 代码 我的 index.css 中设置搜索框样式
mark
index.css 中设置搜索框内部元素样式
mark
