![](https://img-blog.csdnimg.cn/20190927151053287.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
移动端Web
文章平均质量分 87
移动端Web相关
努力的小朱同学
未来很长,梦想很远。
展开
-
移动端web开发(三)--- rem 布局 和 less
一、基础知识1、em 单位 em 是一个相对单位,它的大小取决于父元素字体的大小,如果没有父元素则取决于 html 元素字体的大小。如果父元素字体大小发生变化,则 em 的大小也会相应变化。2、rem 单位 rem 也是一个相对单位,与 em 类似,只不过它的大小取决于 html 元素字体的大小。比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 如果html元素的字体大小发生变化,则 rem 的大小也会相应变化原创 2021-09-18 09:06:49 · 254 阅读 · 1 评论 -
移动端web开发(四)--- 响应式布局和bootstrap 框架
一、响应式开发1、开发原理 所谓的响应式布局,就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而达到适配不同设备的目的。我们将常用的智能设备分为:小于768的为超小屏幕(手机)768~992之间的为小屏设备(平板)992~1200的中等屏幕(桌面显示器)大于1200的宽屏设备(大桌面显示器)2、布局容器 响应式布局需要一个父级元素作为布局容器,来配合子级元素实现响应变化效果。在不同的屏幕尺寸下,通过媒体查询来改变这个布局容器的大小。然后再改变李曼子元素的排列和大小,从原创 2021-09-18 20:27:17 · 406 阅读 · 3 评论 -
移动端web开发(二)--- flex布局
一、flex布局概念1、flex 是 flexible Box 的缩写,意思为弹性布局,使布局变得更加灵活,任何一个元素都可以定义为flex布局。2、采用flex布局的元素称为flex容器,他的所有子元素自动成为容器成员,称为flex项目。3、当父元素设置为flex布局之后,所有的子元素的 float、clear和 vertical-align 属性将不起作用。4、flex容器存在两根轴,主轴(默认为水平轴)和副轴(默认为垂直轴),项目默认沿主轴排列。5、总的来说就是通过设置父盒子为flex布局并原创 2021-09-17 15:17:39 · 1240 阅读 · 1 评论 -
移动端web开发(一)--- 移动端开发基础和流式布局
一、移动端基础 目前国内常见的移动端浏览器有: UC浏览器、百度浏览器、QQ浏览器等等,种类繁多五花八门,但他们也有一个共同点:都是根据 Weblit 内核修改延伸出来的内核,所以如果要考虑移动端兼容性问题,只需要处理 Webkit 内核 即可。不过移动端浏览器发展较晚,所以对HTML5 和 CSS3 支持很高,一般不会出现不兼容的问题。 由于手机的屏幕尺寸碎片化十分严重,所以对我们制作的所有移动端页面都提出了新要求:能够适应众多大小不等的屏幕。二、视口1、概念 视口(viewport原创 2021-09-17 09:36:18 · 293 阅读 · 1 评论