移动web开发之流式布局

最新推荐文章于 2022-11-18 22:47:05 发布
原创 最新推荐文章于 2022-11-18 22:47:05 发布 · 924 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在这里插入图片描述


在这里插入图片描述

01.移动端基础

1.1浏览器现状
在这里插入图片描述
1.2手机屏幕现状
在这里插入图片描述
1.3常见移动端屏幕尺寸
在这里插入图片描述
1.4移动端调试方法
在这里插入图片描述
1.5总结
在这里插入图片描述

02.视口

在这里插入图片描述
2.1布局视口 layout viewport
在这里插入图片描述
2.2视觉视口 visual viewport
在这里插入图片描述
2.3理想视口 ideal viewport

在这里插入图片描述
2.4总结
在这里插入图片描述
2.5 meta视口标签
在这里插入图片描述
在这里插入图片描述
2.6标准的viewport设置
在这里插入图片描述

03.二倍图

3.1物理像素&物理像素比

在这里插入图片描述
在这里插入图片描述
3.2多倍图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3.3背景缩放background-size
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
3.4多倍图切图cutterman
在这里插入图片描述

04.移动端开发选择

4.1移动端主流方案

在这里插入图片描述
4.2单独移动端页面(主流)
在这里插入图片描述
4.3响应式兼容PC移动端
在这里插入图片描述
4.4总结

在这里插入图片描述

05.移动端技术解决方案

5.1移动端浏览器

在这里插入图片描述
5.2 CSS初始化 normalize.css
在这里插入图片描述
5.3 CSS3盒子模型box-sizing
在这里插入图片描述
5.4特殊样式
在这里插入图片描述

06.移动端常见布局

在这里插入图片描述
6.1流式布局(百分比布局)
在这里插入图片描述
在这里插入图片描述
案例:京东移动端首页
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

移动WEB开发之流式布局--移动端常见布局--流式布局
薛定谔的猫
11-21 1117
京东自主研发推出DPG图片压缩技术，经测试 该技术，可直接节省用户近50%的浏览流量， 极大的提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼 容支持，经过内部和外部上万张图片的人眼浏 览测试后发现，压缩后的图片和webp的清晰度 对比没有差距。不占标准文档流 中间的搜索宽度就跟父元素一样，此时我们设置它的外边距，这样它就会随浏览器的大小变化而变化。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局，就是百分比布局，也称非固定像素布局。
移动WEB开发之流式布局-京东案例
qq_46199553的博客
09-09 938
2. 视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 layout viewport 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口  一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。  iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元 素看上去很小，一般默认可以通过手
移动WEB开发之流式布局——学习笔记
weixin_43482965的博客
02-29 529
一、移动端基础 1.浏览器现状 目前手机浏览器都是根据Webkit修改过来的内核，兼容移动端主流浏览器，处理Webkit内核浏览器即可。 2.手机屏幕现状 移动端设备屏幕尺寸非常多，碎片化严重。 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。 3. 移动端调试方法 Chrome DevTools（谷歌浏览器）的模拟手机调试 搭建本地web服务器，手机和服务器一个局域网内，通过手...
移动WEB开发之流式布局
xiecheng1995的博客
05-31 1977
学习目标 能够知道移动web的开发现状 能够写出标准的viewport 能够使用移动web的调试方法 能够说出移动端常见的布局方案 能够描述流式布局 能够独立完成京东移动端首页 1. 移动端基础 1.1 浏览器现状 PC端常见浏览器 360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器 UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器、以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器
移动WEB开发流式布局
czx1826488201的博客
10-31 254
1. 移动端基础 移动端主要处理webkit内核就行 2. 视口 视口：浏览器显示页面的屏幕区域。视口分为布局视口、视觉视口和理想视口。 2.1 布局视口layout viewport 2.2 视觉视口 visual viewport 用户能看到的网站区域，注意：是网站的区域； 通过缩放去操作视觉视口，不会影响布局视口，布局视口仍保持原来的宽度。 2.3 理想视口 ideal viewport...
移动Web开发之流式布局
自知者明，知人者智
12-21 312
前言 1、视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 1.1布局视口  一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 1.2视觉视...
移动WEB开发之流式布局 学习
weixin_41984072的博客
02-20 238
一移动端基础 1.1浏览器现状 移动端常见的浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹手机浏览器等 总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。 1.2移动端调试 ChromeDevTools（谷歌浏览器）的模拟手机调试 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器 使用外...
移动WEB开发之流式布局--移动端基础
薛定谔的猫
11-18 635
移动端浏览器我们主要对webkit内核进行兼容我们现在开发的移动端主要针对手机端开发现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一学会用谷歌浏览器模拟手机界面以及调试。
移动WEB开发之流式布局 ---京东移动端首页
不爱吃菜的菜菜的博客
04-27 742
步骤： 1. 技术选型 方案：我们采取单独制作移动页面方案 技术：布局采取流式布局 2. 搭建相关文件夹结构 3. 设置视口标签以及引入初始化样式 <!-- 引入我们的CSS初始化文件 --> <link rel="stylesheet" href="css/normalize.css"> <!-- 引入我们首页的css --> <link rel="stylesheet" href="css/index...
pink-移动WEB开发之流式布局
xieanna123的博客
12-11 419
移动WEB开发之流式布局 视频链接：移动WEB开发之流式布局 目标： 知道移动WEB的开发现状 写出标准的viewport 使用移动WEB的调试方法 说出移动端常见的布局方案 描述流式分布 独立完成京东移动端首页 目录： 移动端基础 视口 二倍图 移动端调试 移动端技术解决方案 移动端常见布局 移动端开发之流式布局 京东移动端首页制作 1、移动端基础 注意：目前主要使用谷歌浏览器进...
移动web开发之流式布局（百分比布局）
weixin_45282543的博客
11-24 234
移动WEB开发之流式布局 移动端基础 视口 视口：就是浏览器显示页面内容的屏幕区域，分为布局视口，视觉视口，和理想视口。 布局视口：layout viewport 设备的默认宽度（980px） （不好，此宽度让移动端显示的事物物理大小过小，不容易分辨） 通过缩放去操作视觉窗口，不会影响布局，布局视口仍保持原来的宽度 理想视口：ideal viewport 最合适的设备的宽度（decive-width） （同样px大小的事物，在PC端和移动端显示的物理大小相同） meta视口标签:（设置viewport
移动Web开发之流式布局笔记
chentanghui的博客
06-28 269
移动Web开发之流式布局 Web的开发现状 标准的viewport 移动web的调试方法 移动端常见的布局方案 流式布局 独立完成京东移动端首页 1 移动端基础 1.1 浏览器现状 总结：兼容移动端主流浏览器，处理webkit内核浏览器即可。 1.2 手机屏幕现状 移动端设备屏幕尺寸非常多，碎片化严重 Android设备有多种分辨率：480*480，480*854，540*960,720*1280,，1080*1920等，还有传说中的2K，4K屏 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有
web移动端：流式布局
weixin_49555741的博客
05-19 1228
1. 移动端基础 1.1 浏览器现状 pc端浏览器：360、谷歌、火狐、百度、ie 移动端浏览器：uc、qq、百度、谷歌、搜狗 移动端浏览器主要是对webkit内核进行兼容开发的 总结：兼容移动端主流浏览器，处理webkit内核浏览器即可 1.2 手机屏幕现状 尺寸多，碎片化；Android、iPhone设备分辨率多；我们常用的单位是px 1.3 移动端调试方法 Chrome devtools（谷歌）的模拟手机调试 搭建本地web服务器，手机和服务器一个局域网，通过手机访问浏览器 2..
移动web开发_流式布局
wtyzky的博客
02-02 168
移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主...
移动web开发—— 流式布局
weixin_52819925的博客
08-02 373
视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口。 布局视口 layout viewport 视觉视口 visual viewport 理想视口 ideal viewport 将布局视口的宽度修改为视觉视口，就是理想视口。 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都
移动端布局基础
weiwei_zhang2020的博客
04-30 122
移动Web开发 1.移动端基础 1.1 浏览器现状 ​ PC常用浏览器和移动端浏览器，兼容移动端主流浏览器，处理Webkit内核浏览器即可。 1.2 手机屏幕现状 ​ 移动端设备屏幕尺寸比较多 2.视口 ​ 视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。 ​ 2.1 布局视口 ​ 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 ​ iOS,Android基本都将这个视口分辨率设置为980px
任务十一：移动Web页面布局实践
weixin_30849591的博客
03-20 156
任务十一：移动Web页面布局实践 面向人群：有一定HTML及CSS基础，想要尝试移动开发难度：中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。 课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因...
走进小作坊（十一）----移动web实现指南
weixin_34121282的博客
08-19 132
             四、五年前智能手机行业刚刚兴起，差别于之前功能机阉割版的web开发方式，一些学者就開始探索移动web的UI方向了。从PC迁移到移动端的web设计现成可用的原则有，很多其它的则是依据移动端独有特点进行探索、总结经验、原则。这本《移动web实现指南》乐帝本意是提升响应式设计网页的水平，读后发现很多其它的宝藏，揭开了对整个移动端web设计的兴趣之门。     移动设备...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值