本文主要写给刚接触移动开发的同鞋们。首先先将几个主要概念讲一下;什么是移动移动故名思义是为移动终端,大名叫移动通信终端,是指可以在移动中使用的计算机设备。其实就是我们常说的手机。什么是布局?前端开发中布局是将主要的html结构布置好。rem是什么?rem是一种长度单位,是而且仅是根据根元素html改变的长度单位。Root em(REM)是CSS3中新定义的一种长度单位。和之前的em(根据父
转载 2021-05-04 21:38:26
1320阅读
2评论
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0px; padding: 0px; } ...
原创 2019-10-16 10:47:23
73阅读
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0px; padding: 0px; } ...
原创 2019-10-16 10:47:23
22阅读
近期项目需要,移动使用rem单位布局,我之前一直用vw和vh单位,用这也能实现,没啥毛病,但是公司领导让换单位,咱也得改是吧,下面是从网易,淘宝等大厂抄的作业:...
原创 2022-09-14 16:40:25
198阅读
不同的设备完美视口的大小是不一样的 iphone6 -- 375 iphone6plus -- 414 由于不同设备视口和像素比不同,所以同样的375个像素在不同的设备下意义是不一样, 比如在iphone6中 375就是全屏,而到了plus中375就会缺一块 所以在移动开发时,就不能再使用px来进 ...
转载 2021-08-19 07:53:00
400阅读
2评论
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
273阅读
详情 ://www.sharedblog.cn/?post=291. px  像素,相对于屏幕分辨率而言 2. em 相对于父元素字体大小放到缩小多少倍   
原创 2022-02-10 17:50:17
94阅读
详情 http://www.sharedblog.cn/?post=291. px  像素,相对于屏幕分辨率而言 2. em 相对于父元素字体大小放到缩小多少倍    1em = 16px    注:由于元素字体大小不固定,所以不推荐使用em 3. rem 相对于根元素字体大小放大缩小多少倍    注:是rem布局方案中用到最主要的一个单位 4. vw   ...
原创 2021-06-09 11:05:08
469阅读
 前端开发中,需要在各种不同屏幕尺寸大小的设备上运行页面,所以就需要进行移动适配一般有一下几种方法:()媒体查询media:代码冗余()百分比布局:图片之类的会乱()弹性布局flex:高度固定,宽度自适应,天猫用的这玩意()rem+viewport:这个计算比较复杂,淘宝用的就是这玩意rem是什么?移动布局用的最多的就是rem啦,rem就是相对元素根节点的字体大小的单位,其实就是一个
11111111111111111
css
原创 2022-12-21 10:14:56
78阅读
基于移动H5的业务场景下,移动设备的适配问题显得尤为重要,规划好移动适配方案是项目可以完美落地的基石。所以了解rem、em、css、px、device px等概念以及相互之间的差别与联系是设计出好的适配方案的基础。 ...
转载 2021-08-01 22:05:00
1196阅读
目的:设计网站的时候考虑多屏幕尺寸的兼容显示问题。一、viewportviewport指网页的可视区域。手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页元素都挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。常见的使用viewport来优化网页适应移动
原创 2023-10-13 08:31:24
170阅读
meta
原创 2023-05-26 10:38:51
135阅读
css如何定位网站的footer(用DIV+CSS让footer始终在底部) 平时拿CSS布局都是一些内容比较多的网站,前两天用CSS+DIV弄了个内容少的页面,发现了一个小问题,可能大家都会遇到,那就是网站FOOTER的 定位,如果内容比较少的话,页面的FOOTER就会随着内容的减少跑到上面去,不是乖乖的在下面呆着,害得我研究了半天找高人终于给搞定了,也算一个小小 的技巧给大家分享 &
html5在移动的屏幕适应性问题 Html5 曾经是最最炙手可热的技术,移动也因为html5技术的加入变得更加变通一些,人人都喜欢“Write once,run more”,但在今年扎克伯格承认在html5上的失策以来,我们也应该清醒的认识到html5作为一种新兴技术,还有许多不完善的地方,比如html5 的效率问题,这足以让众多程序员们无力吐槽,消费者们也会无法忍受。但不可否认的是htm
0 tl;dr其实也没啥原理,就是一个比例问题。1 前置知识设备独立像素(DIP):一种抽象的像素,与实际物理像素之间的比值就是DPR。简而言之,一个设备独立像素实际上可以由\(1\times1\),\(2\times2\),\(3\times3\)...等任意多个物理像素来表现,取决于设备的设置。而应用一般并不需要实际与物理设备打交道,只与设备独立像素打交道。理想视口:布局视口等于设备独立像素宽
前言现在很多前端项目都是移动优先,要不就是移动样式也需要一套。总之,移动的样式适配是少不了的。1、布局Bootstrap 的栅格系统,CSS的flex布局,grid布局,都能通过调整布局来适配移动的窄屏幕2、CSS媒体查询使用CSS媒体查询,设定移动的样式例如:@media screen and (max-width: 425px) {} @media screen and (min-wi
    position: fixed;     bottom: 0;     left: 0;     z-index: 10;     transform: translateZ(0);//解决ios固定定位问题
css
转载 2021-05-07 11:44:45
1653阅读
2评论
禁止复制黏贴功能 禁止点击之后修改背景颜色 禁止点击一个链接,弹出询问框
转载 2017-01-11 11:02:00
132阅读
2评论
# CSS实现iOS移动无光标效果 作为一名经验丰富的开发者,我很高兴能帮助刚入行的小白们解决实际问题。今天,我们将一起学习如何在iOS移动实现无光标效果。 ## 一、实现流程 首先,让我们通过一个表格来了解整个实现流程: | 步骤 | 描述 | 所需代码 | | --- | --- | --- | | 1 | 确定目标元素 | 根据需求确定需要去除光标的元素 | | 2 | 使用CS
原创 2024-07-27 07:19:11
151阅读
  • 1
  • 2
  • 3
  • 4
  • 5