1.二倍图1.1 物理像素&物理像素比物理像素指的是屏幕的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750*1334我们开发时候的1px不是一定等于1个物理像素的PC端页面,1个px等于1个物理像素的,但是移动端就不尽相同一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比1.2 背景缩放background-size语法:background-
转载
2023-07-13 11:23:17
269阅读
弹性布局可以用于做响应式页面的制作 使用弹性布局需要使用要display里的flex属性 例:让一个div是弹性布局,代码如下.div{
display:flex;
}flex里有很多属性,其中设置在容器上的属性有6个1.flex direction:决定主轴的方向(即项目的排列方向)。row:主轴为水平方向,起点在左边 例<head>
<meta charset="
转载
2024-10-04 11:49:07
115阅读
一、webkit 内核二、移动端网页 CSS 初始化 - normalize.css
原创
2023-04-29 05:32:55
431阅读
本文主要写给刚接触移动端开发的同鞋们。首先先将几个主要概念讲一下;什么是移动端?移动端故名思义是为移动终端,大名叫移动通信终端,是指可以在移动中使用的计算机设备。其实就是我们常说的手机。什么是布局?前端开发中布局是将主要的html结构布置好。rem是什么?rem是一种长度单位,是而且仅是根据根元素html改变的长度单位。Root em(REM)是CSS3中新定义的一种长度单位。和之前的em(根据父
转载
2021-05-04 21:38:26
1320阅读
2评论
一、学习使我快乐 笔记来自拉勾教育大前端,说真的,对于机构我起初报有的信心不是很大,包括以前也报过,但是都因为各种原因半途而费了,偶然的机会...
原创
2022-03-03 10:53:09
150阅读
开开发( 分开开发 也是要写 两套代码)如果想在既能适应PC、又能适应移动端 响应式开
转载
2022-04-13 18:15:55
613阅读
CSS初始化 normalize.csshttp://necolas.github.io/normalize.css/视口标
原创
2023-02-24 12:11:31
149阅读
*网页中常用的单位有哪些* - px 像素 - em 相对单位 - pt 磅 硬件设备 - % 宽高自适应 - deg 移动端重要的单位: rem 相对于根元素html的font-size的大小进行计算的 移动端布局的思路 - 每一个移动端的尺寸大小都是不一样的 html的宽高大小也是不一样的 - ...
转载
2021-08-28 11:41:00
226阅读
2评论
Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性。我们说 flexbox 是一种一维的布局,是因为一个 flexbox 一次只能处理一个维度上的元素布局,一行或者一列。作为对比的是另外一个二维布局网格布局,以后会和大家讲到目录1,如何使用2, Flexbox的两
转载
2021-04-28 11:02:27
411阅读
2评论
移动端 这种布局,你们怎么做的?NO1:图片position, 外层容器padding 线是细节,可以border+负margin,然后加入1border的做法可以用伪类+scale高度要定,看需求,有max和min可以用 去研究下别人怎么写的吧,不同情况布局方法可能不一样 D...
原创
2022-05-05 11:39:05
123阅读
1 移动端布局方案
1.1 百分比布局(流式布局)
百分比布局是一种等比例缩放的布局方式,也是移动Web开发中比较常见的布局方式。在CSS代码中需要使用百分比来设置盒子的宽高。
例如,把盒子的宽度设置成百分比,网页就会根据浏览器的宽度和屏幕的大小来自动调整显示效果。
而且一般的情况下,我们都会用 max-width 和 min-width 做相关的宽度限制以防止过度的拉伸。以下是子元素设置百分比的
原创
2023-09-27 08:53:29
280阅读
点赞
写在最前:移动端中导航的网格式布局无处无在,宽高怎么设置相适应?元素怎么居中对齐?不同场景怎么选择代码最高效?巧妙使用margin、padding等基础属性,小小技巧可以解决许多烦恼! 一、Float布局 1、场景 首页导航布局(无间距) 2、页面布局 <div class="g-grid"> <d
转载
2020-11-20 16:47:00
209阅读
2评论
上一回说到了媒体查询结合rem做移动端布局,步骤如下 首先设置媒体查询,确定html中font-size值的变化 @media all and (max-width:320px){ html{font-size:12px;} } @media all and (min-width:321px) an
转载
2020-05-14 10:23:00
202阅读
2评论
flexible.js (750px) 实现步骤: 1:先去掉禁止用户缩放的meta标签 2:在页面中导入flexible.js <script src=""></script> 3:量出header的height为88px 4:88px / 100 == 0.88rem;
转载
2020-05-14 10:31:00
157阅读
2评论
是不是平时会采很多移动端的雷呢,这次让你一次性扫雷成功
转载
2022-10-13 14:00:23
169阅读
技术选型 采用react框架开发移动端的话,一般的架构是Preact + antd-mobile + react-hammerjs + iscroll。 Preact Preact是React的3kb轻量化方案,拥有同样的ES6 API,其拥有以下优点: 1. 体积小,React V16.0有34.
转载
2020-04-25 17:39:00
435阅读
2评论
1.报错 组件没注册报错 js vue.esm.js?efeb:591 [Vue warn]: Unknown custom element: did you register the component correctly? For recursive components, make sure ...
转载
2021-10-11 13:34:00
184阅读
2评论
1. 固定定位(fixed) 固定定位是绝对定位的一种特殊形式。它以浏览器窗口作为参照物来定义网页元素。当positio
原创
2024-02-28 10:53:10
7阅读