移动端中利用rem的相对于根HTML进行改变，通过一段时间JS实现了移动端自适应，本文则使用纯CSS视口单位来自行自适应，虽然现在的兼容性还没法完全能够接受，但不妨碍你认识这个vw和vh的强大。响应式布局的实现依靠媒体查询(Media Queries)来实现，选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配。即使是通过rem单位
转载
2024-08-28 00:07:21
300阅读
博客在手机打开一直不能适配，手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端，只要修改每个页面的css 即可。之前大概知道怎么去改，但是页面太多实在觉得麻烦，就一直没有去改。当初做博客的时候也没有考虑到手机访问的重要性，所以现在虽然能改，但是也是缝缝补补。 一直想换一套模板的，又觉得要做的实在太多了。不过要想在手机上完美体验还是需要重新做一套前端了，现在先这样用着。 之前
转载
2023-09-18 09:34:04
116阅读
最近帮老师改个网站，将PC端网页改为手机端网页，虽然对于有一定开发经验的前端开发者是很easy的事情，但是呢，对于小白来说，还是很一头雾水的。下面咱们就从头来进行实战，看看自适应到手机端到底是怎么回事！开发必备工具： chrome浏览器 一部手机 CSS手册（推荐菜鸟教程-CSS手册）好了，咱们开始吧！1、首先我先在电脑上打开网页2、接下来使用chrome浏览器自带的手机模拟器看看这个网页在手机上
转载
2024-04-07 08:37:02
50阅读
移动端方案的特点 如果说在PC端，我们可以用float/flex+定宽(如1000px)搞定布局，那么当下手机的型号尺寸多种多样，最流行的如iphone,华为，小米，VIVO等不同品牌的手机各自都有不同的型号，对应的多种多样的尺寸，这么多不同分辨率的手机，要一一适配工作量超级超级大了，简直无穷了。。可见，在手机端，通过定宽来搞定布局是不现实的，既然这样，可选的方案看上去只有百分比布局(所有元素尺
转载
2023-08-29 16:29:56
197阅读
1、通过这段js来替代媒体查询（页面具体宽常见：720/750）单位用rem，通过js所得比例为100：1 此时假定html 即1rem = 100px 具体代码如下 ↓ function pgScale(){ var deviceWidth = document.documentElement.c ...
转载
2021-07-12 10:56:00
590阅读
2评论
响应式是按照pc,pad，mobile 不同尺寸显示不同的布局内容，通过媒体查询。自适应是手机端根据屏幕宽度做等比例的缩放。参考https://www.jianshu.com/p/b00cd3506782具体实现原理请参照：从网易与淘宝的font-size思考前端设计稿与工作流，写的很不错！希望对需要的朋友有所帮助！<!DOCTYPE html>
<html lang="en"&
转载
2023-07-29 20:36:04
207阅读
原型如下：要求如下：适应各种机型源码如下： --> .container { border: 1px solid #F0F1F1; -webkit-box-shadow: 0px 3px 3p
原创
2021-07-29 10:33:22
154阅读
原
转载
2017-11-27 14:55:00
93阅读
2评论
原型如下：要求如下：适应各种机型源码如下： --> 高校地图 ...
转载
2017-11-27 14:58:00
143阅读
2评论
原型如下：要求如下：适应各种机型源码如下：<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g
原创
2022-04-22 11:40:08
546阅读
近日，苹果正式推出了自助维修服务，消费者可通过Apple自助维修店获取维修手册和原装Apple零件和工具。据了解，目前自助维修服务仅在美国推出，后续将拓展至其他国家和地区。官方资料显示，苹果的维修工具包含两个箱子，一个重43磅（约19.5千克），另一个重36磅（约16.3千克），加起来约有36千克重。此外，这两个箱子都有便于运输的轮子。据了解，苹果这套工具租赁套件价格为49美元（约321元人民币）
转载
2023-10-16 06:25:06
56阅读
# iOS 自适应单位的实现指南
在iOS开发中，创建自适应布局是一个非常重要的技能，因为设备的屏幕尺寸和像素密度各不相同。通过使用自适应单位，你的应用可以在不同的设备上保持良好的视觉效果。下面是一个实现自适应单位的流程和具体步骤。
## 实现步骤概览
我们将通过以下步骤来实现iOS自适应单位：
| 步骤 | 说明 |
| ---- | ----
原创
2024-08-16 10:00:42
52阅读
手机端的页面需求大多数为：自动适应不同手机的屏幕，包括平板，以往的处理方式通常都是：1.根据不同的分辨率制作不同的页面，然后通过js来处理选择显示哪个页面。2.通过媒体查询来编写多种css样式，让其自动选择。3.使用百分比。 但这两种方式都有一个很大的缺点，无法做到完全适应所有分辨率，例如有一个按钮大小设置成100px*200px，你通过媒体查询的方式来处理低
转载
2024-08-13 17:25:56
37阅读
这里不说bootstrap和其他框架的自适应方案，仅用最基本的css属性来控制使用自适应方案的前提：
原创
2022-07-09 00:19:45
716阅读
写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况： <style> div{width:400px;height:400px;border:1px solid #000; } img{width:100%;height:100%;} </style> 不管容器有多大，只要将img的宽高设置
转载
2020-07-06 22:49:00
2800阅读
2评论
css3自适应布局单位vw,vh一、总结一句话总结：vw和vh都是视图单位，分别为视图宽高的1% 1、vh/vw与%区别？%是相对于父元素，vh和vw是相对于视图高宽% 百分比，相对长度单位，相对于父元素的百分比值vh和vw相对于视口的高度和宽度 二、css3自适应布局单位vw,vh你知道多少？视口单位(Viewport units)什么是视口？ 在PC端，视口指的是在PC端，指的是浏览器的可
转载
2019-12-05 15:35:00
349阅读
2评论
rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in windo...
原创
2022-04-06 13:47:23
609阅读
在头部加上meta标签 <html lang="en" style="font-size:100px;"> <meta http-equiv="Xial-...
原创
2022-07-06 16:30:44
77阅读
国内绝大多数内容为主的网站(知乎，果壳，V2EX，网易新闻等)均使用内容区定宽布局，大多数电商网站(网易考拉，京东，聚美优品)也使用了内容区定宽的布局，也有些网站使用了自适应布局：天猫
内容区采用媒体查询+定宽，在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏。注意热门市场这里，虽然每一个方块的宽度是随着断点变化的，但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的
一、第一种方式是比较简单的，开发速度也比较快。主要利用-webkit-transform:scale()这个属性，比较设计稿和当前屏幕的宽度，或者高度，亦或者取两者的最小值，来进行自适应。1. 如果宽度自适应，如果兼容iphoneX的话，此时的设计稿的背景图需要延长至1448，内容放在1206内，然后可以把背景图设在一个宽高100%的容器内，background-size:100% auto，需要
转载
2023-08-01 23:26:43
478阅读
