![](https://img-blog.csdnimg.cn/85802f4b173544f792b7a258be84efd6.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Web移动端、响应式布局
文章平均质量分 80
主要记录在学习过程中的笔记和案例
小白小白从不日白
这个作者很懒,什么都没留下…
展开
-
网格布局--grid
CSS网格是一个用于web二维的布局系统。利用网格,可以把内容按照行与列的格式进行排版。另外,网格还能非常轻松地实现一些复杂的布局。原创 2022-04-17 12:44:43 · 1116 阅读 · 0 评论 -
BootStrap--初识BootStrap
一、初识BootStrap响应式布局的优缺点:响应式布局的使用场景:1.1 Bootstrap3和4的区别CSS预处理器不同, Bootstrap3采用Less, Bootstrap4采用SASS 格栅种类不同, Bootstrap3提供4种格栅, Bootstrap4提供5种格栅 使用单位不同, Bootstrap3使用px作为单位, Bootstrap4使用rem作为单位 内部布局方式不同, Bootstrap3使用float布局, Bootstrap4使用...原创 2021-11-28 20:07:32 · 2203 阅读 · 0 评论 -
移动端常用的几种适配方案
一、媒体查询1.1 媒体查询的优劣势优势: 简单、哪里不对改哪里调整屏幕宽度时不用刷新页面即可响应式展示特别适合对移动端和PC端维护同一套代码的时候劣势:由于移动端和PC端共同使用同一套代码,因此代码量较大、维护不方便为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源的时候为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式1.2 媒体查询的应用场景对于比较简单(页面不复杂)的网页,诸如:企业官网、宣传单页等,我们原创 2021-09-29 16:04:15 · 963 阅读 · 0 评论 -
swiper-scrolle bar插件使用、3D Flow 插件使用、progress插件的使用、
@charset "utf-8";* { margin: 0; padding: 0;}html,body { width: 100%; height: 100%;}.swiper-container { width: 100%; height: 100%;}.swiper-wrapper { width: 100%; height: 100%;}.swiper-slide { width: 100%; .原创 2021-07-16 09:04:19 · 475 阅读 · 0 评论 -
响应式布局
响应式布局可以更好的帮助我们去适配PC端和移动端以及不同屏幕大小的移动端所谓的响应式设计就是让我们的页面在不同的设备上可以正常使用主要的方法:隐藏:确定好哪一部分的内容是可以在移动端进行隐藏的,比如说导航、个人信息这些我们可以采用以点击菜单弹出来的方式进行展示 折行:比如说我们有一个类似特性列表这样一个要去介绍一个事物的优点呀这些的,那么在PC端它可能是一行显示的,但是在移动端我们可以让它一行显示一个或者两个 自适应空间:这个就比如两栏布局或者三栏布局一样,有一部分内容宽度是固定的,..原创 2021-07-15 21:06:45 · 715 阅读 · 0 评论 -
混合开发与移动端--H5混合开发、H5页面的开发布局、开发注意事项、H5与原生(安卓)交互、webpack打包优化解决方案、H5调试工具、webview
H5混合开发混合开发、原生开发、H5开发的区别:简述:主流APP:原生APP、H5(webapp)、混合APP,相对应的定制研发即原生开发、H5开发、混合开发原生APP开发优缺点:可以访问手机的所有功能,可实现功能最齐全 运行速度快、性能高、用户体验较好 兼容性高 比较快速的使用设备端提供的接口,处理速度上有优势 开发周期长、成本较高,可移植性较差 内容有限制 获得新版本必须要用户重新手动下载更新WEBAPP开发:简述:HTML5开发,利用WEB技术进行的APP开.原创 2021-07-13 09:35:17 · 2775 阅读 · 0 评论 -
移动性能优化--概述、HTML中的CSS和JavaScript、图片和其他优化、CSS选择器优化以及属性和其他优化、DOM操作优化、事件优化、资源按需加载和预加载
概述什么是性能:网站的响应速度打开页面大实际能够正常使用的事件间隔 浏览页面以及和页面进行交互的流畅程度为什么要优化移动端的性能:提升用于体验 移动端网络速度慢 移动端设备性能低性能优化策略分类:网页资源请求与加载 包括html文件、css文件等资源的加载网页渲染浏览器接收到想要的资源后,首先会读取相应的html文件,并且会生成DOM树,在读取的过程中可能会读取到css文件,那么此时就会发送请求给服务器,要...原创 2021-07-12 10:09:14 · 141 阅读 · 0 评论 -
移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性在移动端时可以放心的使用h5相关的标签但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 【兼容】 下载一个 html5shiv.min.js 文件,引入即可2. JS之浏览器兼容性例如在使用requestAnimationFrame之前我们不知道浏览器支不支持,那么就可以通过如下语句去进行判断:if(window.requestAnimationFrame){}else{}这样的做法是可以的,但...原创 2021-07-11 15:13:16 · 501 阅读 · 2 评论 -
轮播图小案例
原理总的容器:幻灯片容器:里面的图片大小与总的容器大小相同移动的距离:索引*幻灯片的宽度代码: <div id="slider" class="slider"> <div class="slider-item-container"> <div class="slider-item"> <a href="###" class="slider-lin...原创 2021-07-09 17:09:36 · 180 阅读 · 0 评论 -
移动端事件--touch事件的分类、touch事件的event对象、 其他触摸事件
一、touch事件的分类1.1 触摸事件(touch) .box { width: 150px; height: 150px; background-color: red; margin: 20px auto; }<div id="box" class="box"></div> <script> var bo原创 2021-07-09 13:48:11 · 2067 阅读 · 2 评论 -
移动端适配--概述、简单适配原理、通用适配方案实现
使页面在移动端各种大小的屏幕上都能够正常显示的一种移动端开放方案与响应式布局的关系:适应各种屏幕尺寸移动端适配疑问:必须使用rem?不是,对于这个其实并没有一个固定的标准,只要合适什么单位都是合适px%emremvw/vh媒体查询只能用在响应式布局?不是,在移动端也是可以的,只要合适都可以使用,像floatleft等都可以使用简单的适配原理:%emremvw/vh1rem=html...原创 2021-07-08 16:34:02 · 2089 阅读 · 1 评论 -
常见的flex布局方案
flex常见的布局方案,比如:不定项居中对齐、均分列布局、子项分组布局等原创 2021-07-06 13:17:06 · 650 阅读 · 0 评论 -
flex布局
一、概述什么是flex布局?Flex是FlexibleBox的缩写,意为"灵活的盒子"或"弹性的盒子",所以flex布局一般也叫作"弹性布局"什么是flex容器(flexcontainer)?采用flex布局的元素,称为flex容器什么是flex项目(flexitem)?flex容器的所有子元素自动成为容器成员,称为flex项目二、容器属性a.display决定是否使用flex布局display:fle...原创 2021-07-05 13:29:48 · 439 阅读 · 2 评论