之前一直都在做电脑端的网页制作，几乎没有接触过手机端的页面开发，在我看来，开发手机端的页面还不如直接用安卓原生或者react-native开发，但由于公司的需求，于是我只能硬着头皮来解决。
手机端的页面需求大多数为：自动适应不同手机的屏幕，包括平板，以往的处理方式通常都是：1.根据不同的分辨率制作不同的页面，然后通过js来处理选择
转载
2024-02-18 10:52:35
172阅读
这里不说bootstrap和其他框架的自适应方案，仅用最基本的css属性来控制使用自适应方案的前提：
原创
2022-07-09 00:19:45
710阅读
网页自适应手机屏幕的几种方法一. 允许网页宽度自动调整<meta name="viewport" content="width=device-width, initial-scale=1" />viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始
转载
2023-12-01 13:54:46
216阅读
网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文章讲述模糊的地方。 1、使用meta标签，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 首先解释该标签的含义： <met
原创
2024-01-18 13:42:56
110阅读
前言VueJS可以说是近些年来最火的前端框架之一，越来越多的网站开始使用vuejs作为前端框架，vuejs轻量、简单的特性使得前端开发变得更加简易，而基于vuejs的前端组件库也越来越多。我们今天使用的ElementUI，是饿了么团队开发的一款基于vuejs的前端组件库，也是众多vuejs组件库里面比较优秀的一款。这里要说一下我们构建网站所需要用到的一些东西：NodeJS（npm）Webstorm
屏幕大小1、不同的layout Android手机屏幕大小不一，有480x320，640x360，800x480.怎样才能让App自动适应不同的屏幕呢？ 其实很简单，只需要在res目录下创建不同的layout文件夹，比如：layout-640x360，layout-800x480，所有的layout文件在编译之后都会写入R.java里，而系统会根据屏幕的大小自己选择合适的layout进行使用。
转载
2023-12-08 12:47:20
572阅读
关于Android的屏幕适配方案网上有很多很多，很多大神讲的很全面也都很好，所以这里我就不班门弄斧了，这篇文章主要介绍安卓开发过程中加载网络图片（本文中加载图片的类库为Picasso），布局中ImageView不同宽高展示的适配方案，主要分为以下三大类：一、ImageView宽度小于屏幕宽度的（即原图宽高确定，且在原型图中宽高有明确标注的），比如item中的一个图片元素，或者其他布局情况下的一个图
转载
2023-09-07 22:09:35
468阅读
屏幕大小：一：不同的layoutAndroid手机屏幕大小不一，有480x320, 640x360, 800x480.怎样才能让App自动适应不同的屏幕呢？ 其实很简单，只需要在res目录下创建不同的layout文件夹，比如layout-640x360,layout-800x480,所有的layout文件在编译之后都会写入R.java里，而系统会根据屏幕的大小自
转载
2023-12-31 19:52:54
142阅读
这是鼠年来的第一篇文章！也是刚开始远程上班，强制度假后拿到的第一个任务是完成微信公众号手机端项目的开发！话不多说，vue走起来！一、安装lib-flexible插件【lib-flexible】移动端弹性布局适配解决方案。用于设置rem的基准值，插件会自动对html根元素进行font-size的设定，默认会设置成屏幕宽度的十分之一。打个比方：如果当前屏幕的宽度是1920px，它就会自动给html标签
1、屏幕相关概念1.1分辨率是指屏幕上有横竖各有多少个像素1.2屏幕尺寸指的是手机实际的物理尺寸，比如常用的2.8英寸，3.2英寸，3.5英寸，3.7英寸android将屏幕大小分为四个级别（small，normal，large，and extra large）。1.3屏幕密度每英寸像素数手机可以有相同的分辨率，但屏幕尺寸可以不相同，Diagonal pixel表示对角线的像素值（=），DPI=9
转载
2024-09-26 15:57:01
82阅读
# 实现Android HTML适应手机教程
## 1. 整体流程
在实现Android HTML适应手机的过程中，主要需要以下几个步骤：
| 步骤 | 内容 |
|------|--------------------|
| 1 | 创建Android工程 |
| 2 | 在res目录下创建assets目录，并将HTML文件放入 |
| 3
原创
2024-04-24 05:43:39
50阅读
http://bl
原创
2023-08-08 11:25:56
2350阅读
vue滑块组件验证日常吐槽 作为一个程序员的我，使用element发现没有，类似滑块组件验证的那种组件，我流下了无法使用轮子的眼泪，请element大佬多造一点组件可好，我们这种实习生切图切的慢哦，慢的话是要被开除的》》》后台开发需要一个滑块验证滑块验证可以解决一些安全问题，和带来用户体验上的上升 类似这种（这里用一下图，如果侵权请联系一下我） 这里用一下别人的图，公司的不太方便贴出来代码这里主要
转载
2024-10-10 22:23:20
48阅读
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。其中：width=device-width ：表示宽度是设备屏幕的宽度initial-scale=1.0：表示初始的缩放比例minimum-scale=0.5：表示最小的缩放比例maximum-sca
转载
2012-12-19 15:03:00
252阅读
2评论
最近帮老师改个网站，将PC端网页改为手机端网页，虽然对于有一定开发经验的前端开发者是很easy的事情，但是呢，对于小白来说，还是很一头雾水的。下面咱们就从头来进行实战，看看自适应到手机端到底是怎么回事！开发必备工具： chrome浏览器 一部手机 CSS手册（推荐菜鸟教程-CSS手册）好了，咱们开始吧！1、首先我先在电脑上打开网页2、接下来使用chrome浏览器自带的手机模拟器看看这个网页在手机上
转载
2024-04-07 08:37:02
50阅读
一、最终效果为了不浪费大家时间，先展示最终效果，看看是不是大家需要的解决方案：完整项目地址：https://github.com/zxf20180725/canvas_auto-adapted标准分辨率：其他分辨率的适配情况：二、需求1.canvas的内容能全部展示在屏幕上2.尽量能保证图像不变形3.绘制的文字也能自适应三、解决方案1.我们需要指定一个标准分辨率gameW和gameH2.我们需要获
转载
2023-08-29 11:44:05
759阅读
在网页的中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。其中：width=device-width ：表
转载
2013-10-31 17:11:00
137阅读
2评论
今天，在调网页界面的时候，遇到了一个问题，同样的样式，在一个页面上显示效果挺好，另一个无论是字体还是样式布局，
原创
2022-12-01 23:39:25
263阅读
移动端方案的特点 如果说在PC端，我们可以用float/flex+定宽(如1000px)搞定布局，那么当下手机的型号尺寸多种多样，最流行的如iphone,华为，小米，VIVO等不同品牌的手机各自都有不同的型号，对应的多种多样的尺寸，这么多不同分辨率的手机，要一一适配工作量超级超级大了，简直无穷了。。可见，在手机端，通过定宽来搞定布局是不现实的，既然这样，可选的方案看上去只有百分比布局(所有元素尺
转载
2023-08-29 16:29:56
197阅读
1，先看看网上关于移动端适配讲解再聊移动端页面适配，rem和vw适配方案！基础点：rem相对根节点字体的大小。所以不用px;根字体：字体的大小px;px：你就当成cm(厘米)这样的东西吧；基准：750设计稿；这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！目标一 、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，
