住房和城乡建设部网站职责,在网上做效果图网站,seo基础入门,郑州市网站建设移动Web - 基础流式布局
目标
了解移动端主要浏览器的内核掌握用谷歌浏览器调试移动端页面#xff08;重要#xff09;了解布局视口、视觉视口、理想视口使用mate标签设置理想视口#xff08;重要#xff09;了解视网膜屏、物理像素、二倍图会使用background-size设…移动Web - 基础流式布局
目标
了解移动端主要浏览器的内核掌握用谷歌浏览器调试移动端页面重要了解布局视口、视觉视口、理想视口使用mate标签设置理想视口重要了解视网膜屏、物理像素、二倍图会使用background-size设置二倍精灵图重要掌握圣杯布局的两种方法border-box margin重要了解移动端两类开发方案知道什么是流式布局重要能够独立完成京东移动端首页重要
1、移动端浏览器和屏幕现状
目标了解移动端主要浏览器的内核、掌握用谷歌浏览器调试移动端页面
1.1 浏览器现状
- pc端谷歌浏览器Blink、火狐浏览器Gecko、IE浏览器Trident、360浏览器、QQ浏览器、百度浏览器、搜狗浏览器
- 移动端欧朋浏览器PrestoUC浏览器QQ浏览器百度手机浏览器360安全浏览器谷歌浏览器搜狗手机浏览器猎豹浏览器以及其他杂牌浏览器 内核大部分都是webkit
- 移动端浏览器内核Webkit内核的适用范围则较为广泛Android原生浏览器、苹果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit开源内核开发的
总结兼容移动端主流浏览器处理Webkit内核浏览器即可
1.2 手机屏幕现状
移动端设备屏幕尺寸非常多碎片化严重。
Android设备有多种分辨率480x800, 480x854, 540x960, 720x12801080x1920等还有传说中的2K4k屏。
iPhone主要分辨率有640x960, 640x1136, 750x1334, 1242x2208等。
查看手机屏幕尺寸网址添加链接描述
总结
作为开发者无需关注这些分辨率因为我们常用的尺寸单位是 px 。因此我们开发的网页要做到适应各种手机屏幕尺寸
1.3 移动端页面调试方法重要
Chrome DevTools谷歌浏览器的模拟手机调试 进入手机模式 选择手机型号 设置页面百分比 搭建本地web服务器手机和服务器一个局域网内通过手机访问服务器(后面课程掌握) 使用外网服务器直接IP或域名访问(后面课程掌握)
2. 视口
目标了解布局视口、视觉视口、理想视口
视口viewport:就是浏览器显示页面内容的屏幕区域, 视口可以分为布局视口、视觉视口和理想视口
2.1 布局视口 layout viewport
- 概念: 为了解决早期pc端页面在移动端的显示问题一般移动端的浏览器设置的默认视口称为布局视口
- 大白话浏览器默认的窗口宽度
- 布局视口大小iOS, Android基本都将这个视口设置为 980px所以PC上的网页大多都能在手机上呈现只不过元素看上去很小把浏览器整体压缩在一个小屏幕里面一般默认可以通过手动缩放网页
2.2 视觉视口 visual viewport
- 概念字面意思它是用户正在看到的网站的区域。注意是网站的区域。 我们可以通过缩放去操作视觉视口但不会影响布局视口布局视口仍保持原来的宽度
2.3 理想视口 ideal viewport
- 概念布局视口的一个理想尺寸只有当布局视口浏览器的尺寸等于设备屏幕的尺寸时才是理想视口 - 设置理想视口方法mate标签 重要
meta nameviewport contentwidthdevice-width, initial-scale1.0,user-scalableno,maximum-scale1.0,minimum-scale1.0最标准的viewport设置
视口宽度和设备保持一致视口的默认缩放比例1.0不允许用户手动自行缩放最大允许的缩放比例1.0最小允许的缩放比例1.0
3. 二倍图
目标了解屏幕分辨率、了解图片分辨率、了解视网膜屏、会使用background-size设置背景图的大小、会使用二倍精灵图设置元素背景
3.1 手机屏幕
通常我们所指的屏幕尺寸实际上指的是屏幕对角线的长度一般用英寸来度量如下图所示1英寸 2.54cm 绝对单位到哪都不会变的值
3.2 物理像素采光点
- 概念客观存在。指计算机显示设备中的最小单位即一个像素点的大小。每一个像素点可以理解为就是屏幕上的一个发光点。每个点可以发一个颜色就是我们看到的画面 - 发展早期的屏幕物理像素点客观的小灯泡都比较大比如玩游戏的超级玛丽的画面的颗粒感很强随着技术的进步物理像素点会被做的越来越小会被做小
3.3 屏幕分辨率 视网膜屏 css像素
屏幕分辨率物理像素点的个数来衡量表示屏幕水平和垂直方向的物理像素点的个数
iPhone3和iPhone4是同一个屏幕尺寸下比较分辨率 分辨率高的优势直观感受画面细腻物理像素越小屏幕发光点越小Retina视网膜屏幕是一种显示技术可以将把更多的物理像素点压缩至一块屏幕里从而达到更高的分辨率并提高屏幕显示的细腻程度即1px代表更多的物理像素CSS像素 px 1px代表的长度是固定的因此屏幕分辨率越高1px代表的物理像素就越多
3.4 图片分辨率 概念指图片横纵方向各有多少个物理像素光点 下图分辨率640*426 提供了多少个色彩发光点迎合物理像素点 一个萝卜一个坑图片在手机上展示时图片的光点会对应手机的光点即物理像素点和物理像素点对接 图片的光点比作萝卜手机的采光点比作坑光点是一一对应的所以称一个萝卜一个坑 假设有200*200分辨率的图片在不设置图片宽高的情况下展示在宽度分别是320iphone3、640(iphone4)分辨率的手机上展示的效果如下 问题相同的图片不设置宽高在不同的设备下展示的大小不一样 宽度第2个是第1个的0.5倍面积第2个是第1个的1/4倍 原因 200*200分辨率的图片200个颜色发光点萝卜一个物理像素点发一个颜色一个萝卜一个坑屏幕都需要200个物理像素点坑的宽度大小32016400.5所以显示为上图。 目标显示大小一样 解决方法 直接设置图片宽高相同不建议图片在分辨率高的设备上会模糊UI提供二倍图
3.5 二倍图-分辨率是尺寸2倍
概念设置的图片的分辨率和图片的宽高是2倍的关系称为二倍图大白话设置CSS像素200px宽320分辨率200坑,640分辨率400坑 像针对640分辨率手机屏iPhone4要求设计给400*400图对应我们CSS设置200px,有二倍的关系命名 xxxxx2x.png二倍图xxxxx3x.png三倍图
3.6 用二倍精灵图做背景
使用核心UI给出精灵图的分辨率应该是psdUI稿上图片尺寸的二倍所以应该将精灵图缩小到原来一半再定位
background-size
div {width: 500px;height: 500px;border: 2px solid red;background: url(images/dog.jpg) no-repeat;/* background-size: 图片的宽度 图片的高度; *//* background-size: 500px 200px; *//* 1.只写一个参数 肯定是宽度 高度省略了 背景会等比例缩放 *//* background-size: 500px; *//* 2. 里面的单位可以跟% 相对于父盒子来说的 *//* background-size: 50%; *//* 3. cover 等比例拉伸 要完全覆盖div盒子以图片宽高的最小值覆盖全为准 可能有部分背景图片显示不全关键词等比缩放绝对没有留白*//* background-size: cover; *//* 4. contain 高度和宽度等比例拉伸 以图片宽高的最大值覆盖全为准 可能有部分空白区域 关键词等比缩放显示全面可能留白 */background-size: contain;
}步骤 利用background-image引入二倍精灵图将二倍精灵图在fw软件中缩小至一倍查看此时图片的宽度利用background-size设置背景大小利用fw软件测量此时需要的图标的定位利用background-position设置背景定位 注意 非精灵图的二倍图UI给我们我们该怎么用就怎么用和普通图片没有区别在用fw打开二倍精灵图时千万不要保存图片会导致图片变成一倍分辨率
4. 移动端布局现状
目标了解目前移动端页面开发的主流方法
响应式三星电子官网。添加链接描述 特点可兼容PC 移动端一个页面多个端适配显示制作起来要考虑到兼容性的样式 媒体查询bootstarp 单独制作(主流)淘宝、京东、苏宁手机端都是单独制作的流式、flex、rem布局、专门针对各种手机屏幕进行开发 流式布局百分比布局移动web开发使用的比较常见的布局方式不改变文字和图片的大小看情况而定flex 弹性布局强烈推荐lessrem媒体查询布局混合布局
5. 移动端技术方案
目标会使用-webkit-前缀解决webkit的兼容性问题 、移动端公共样式的引用、圣杯布局
5.1 移动端浏览器兼容问题特殊样式设置
移动端浏览器基本以 webkit 内核为主因此我们就考虑webkit兼容性问题。
我们可以放心使用 H5 标签和 CSS3 样式。
同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可 /*CSS3盒子模型*/box-sizing: border-box;-webkit-box-sizing: border-box;/*点击高亮我们需要清除清除 设置为transparent 完成透明*/-webkit-tap-highlight-color: transparent;/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/-webkit-appearance: none;/*禁用长按页面时的弹出菜单*/img,a { -webkit-touch-callout: none; }5.2 移动端公共样式
移动端 CSS 初始化推荐使用 normalize.css/
Normalize.css保护了有价值的默认值
Normalize.css修复了浏览器的bug
Normalize.css是模块化的
Normalize.css拥有详细的文档
官网地址添加链接描述
5.3 大量使用 box-sizing: border-box
/* 传统盒子的总宽度 CSS中设置的 width border padding */
box-sizing: content-box;/* CSS3盒子模型:盒子的宽度就是设置的宽度且宽度width 里面包含了 border 和 padding */
box-sizing: border-box;解决问题
流式布局百分比设置宽高时给盒子添加边框或者内边距导致盒子掉下来圣杯布局
5.4 圣杯布局左右两侧固定中间自适应两种方法
box-sizing: border-box
head
style.warp{position: relative;width: 100%;height: 200px;box-sizing: box-border;padding: 0 200px;}.right,.left{position: absolute;width: 200px;height: 100%;background-color: blue;}.right {right: 0;top: 0;}.left{left: 0;top: 0;}.mid{width: 100%;height: 100%;background-color: blueviolet;}/style
/head
bodydiv classwarpdiv classleft/divdiv classmid111111/divdiv classright/div/div
/bodymargin : 中间盒子不设置宽设置margin0 200px; 左右两边固定宽高定位
head
style.warp{position: relative;width: 100%;height: 200px;}.right,.left{position: absolute;width: 200px;height: 100%;background-color: blue;}.right {right: 0;top: 0;}.left{left: 0;top: 0;}.mid{margin: 0 200px;height: 100%;background-color: blueviolet;}/style
/head
bodydiv classwarpdiv classleft/divdiv classmid111111/divdiv classright/div/div
/body6. 京东案例
目标: 掌握视口标签设置、二部图使用图片、精灵图、流式布局的特点
6.1 准备工作 设置视口标签、初始化样式
meta nameviewport contentwidthdevice-width, user-scalableno,initial-scale1.0, maximum-scale1.0, minimum-scale1.0link relstylesheet hrefcss/normalize.css
link relstylesheet hrefcss/index.cssbody样式的初始化设置
body {width: 100%;min-width: 320px;max-width: 640px;margin: 0 auto;font-size: 14px;color: #666;
}6.2 整体布局
设置body布局划分
6.3 dpg 、 webp
dpg京东自主研发推出DPG图片压缩技术经测试该技术可直接节省用户近50%的浏览流量极大的提升了用户的网页打开速度。全部浏览器的兼容支持压缩后的图片和webp的清晰度对比没有差距。webp谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3并能节省大量的服务器宽带资源和数据空间
6.4 涉及旧知识
先看这个盒子要不要设置高度没有高度的时候一般是靠内部子元素撑起来的。伪元素左侧或右侧的线、简单的图标采用伪元素进行设置结构伪类选择n 作为参数一定要放在前面清除浮动
6.4 涉及旧知识
先看这个盒子要不要设置高度没有高度的时候一般是靠内部子元素撑起来的。伪元素左侧或右侧的线、简单的图标采用伪元素进行设置结构伪类选择n 作为参数一定要放在前面清除浮动
/* 必须指定宽度*/
div {width: 100%;overflow: hidden;
}
