一、viewpoint缩放方案原理：在写CSS时完全按照设计稿来（如750px设计稿），页面开发好后在head标签内加上：<meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" >代码：<script>
const width = 750
const adap
转载
2024-01-30 03:43:02
233阅读
手机跟电脑联调，我之前每次都是打包，然后重新测试。，，神烦。。。突然有天发现，可以时时跟新，
原创
2022-05-27 07:23:01
200阅读
网页屏幕适配----电脑-手机
原创
2021-07-15 15:22:41
177阅读
tip:1.css默认手机样式，平板在此基础上修改数值；2.以500px作为两者区分1.手机cssh3{ height: 4.96rem; padding-top: 1.51rem; font-size: 1rem; font-weight: 500; text-align: center; }
原创
2022-01-29 10:37:35
915阅读
tip:1.css默认手机样式，平板在此基础上修改数值；2.以500px作为两者区分1.手机cssh3{ height: 4.96rem; padding-top: 1.51rem; font-size: 1rem; font-weight: 500; text-align: center; }2.平板css2.1竖屏@media screen and (orientation: portrait) and (min-device-widt.
原创
2021-07-12 11:21:22
1270阅读
Fragment是Android 3.0版本引入的组件，而Android 3.0是基于平板设计的版本，可以猜想Fragment出现的原因之一就是适配大屏幕的Android设备。当然，也提供了support-v4的library支持更老的Android API Level。Android平板的Setting界面就是很好的案例，左边显示列表，右边显示对应列表项的详细内容。就像这样:fragment_l
转载
2023-06-27 14:35:45
389阅读
适配手机和电脑访问对于网站来说至关重要，这主要基于以下几个方面的考虑：首先，适配不同设备能够提升用户体验。随着智能手机的普及，越来越多的人使用手机浏览网页和观看视频。如果网站没有适配手机，用户在手机上浏览时可能会遇到字体小、图片不清晰、页面加载慢等问题，这会导致用户跳出率高，进而降低用户体验和满意度。而适配手机后，网站可以根据手机屏幕尺寸和分辨率进行自动调整，使内容更易于阅读和导航，从而提升用户体
原创
精选
2024-03-07 10:31:30
10000+阅读
# Android 手机App如何适配平板电脑
随着移动设备种类的增多，Android手机App的适配问题逐渐成为开发者关注的焦点。本文将探讨如何使Android手机App适配平板电脑，解决实际问题，并提供示例。
## 问题背景
在开发Android App时，开发者往往首先考虑的是手机设备。然而，随着平板电脑的普及，App在平板上的显示效果和用户体验也变得同样重要。如果App没有针对平板电
原创
2024-07-25 08:24:13
466阅读
响应式布局
Media Query 的使用方法
在上例中， 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式。通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-widt
转载
2023-10-08 20:40:24
373阅读
一、PC端 和 移动端适配分析： 1、PC端的适配，只是分辨率的不同引起的适配问题。这种适配好解决，这里就不讲了。 2、移动端的适配，移动端的适配主要是： 屏幕视口的分辨率和像素分辨率是不统一；不同手机的视口 分辨率也是不一样的。二、（移动端）屏幕相关概念：（下面的概念只是按照个人的理解来写的，只是为了解决前端适配的而写的。其它的概念不用知道的那么清楚）
转载
2023-07-21 17:24:35
396阅读
css中添加屏幕自适应方法(rem)只需要在公共css文件中添加下面代码：设计稿以750px，基础字体为20px为例，兼容性高，使用过程中px转化为rem即可/*竖屏*/
@media screen and (max-aspect-ratio: /){
html {font-size:calc(100vw / * );}
@media screen and (min-width: 750px) {
转载
2024-05-07 18:32:22
109阅读
在html篇里提到设置视口宽度和设备宽度，固定的meta配置就是写死的，死记硬背应该清楚的是手机端的适配应该克服的难题就是宽度根据手机屏幕的大小变化，而高度却没有办法跟随比例变化，也就是宽高比，比如在手机上要一行上排列三个div放正方形的三个div，要怎么做，三个div浮动排列后各自设置width为33.3%，那高度呢，在pc端可以直接100*100，但是手机不行，不等比排列太难看了，并且pc的字
转载
2023-11-09 04:05:35
78阅读
内存的作用是暂时存放CPU中的运算数据以及与硬盘等外部存储器交换数据。电脑内存是因为硬盘的读取速度太慢，所以是起转接的作用。如果内存太小的话，电脑会比较卡顿，运行的程序越多越明显。手机内存包括「ROM+RAM+内存卡」三部分，只有RAM才相当于电脑的内存，而手机刷机实际就是刷ROM。 手机内存跟电脑内存 通常厂商把手机内存与存储卡混淆，其标称的「内存」则往往是错指SD卡或者其他的外设存
原创
2023-05-25 06:25:20
3109阅读
Nginx简介 & 安装1、Nginx简介1）Nginx 特性2）Tengine简介2、Nginx安装1）RPM包安装①在线RPM包安装②yum源安装2）源码安装 1、Nginx简介Nginx 是一款轻量级的网页服务器、反向代理服务器以及电子邮件（IMAP/POP3）代理服务器。此软件在 BSD-like 协议下发行，可以在UNIX、GNU/Linux、BSD、Mac OS X、Sola
转载
2024-03-27 10:56:51
104阅读
1、通过link方法 link方法引入媒体类型其实就是在标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。这种方式引入媒体类型时常跟着引用的样式文件
原创
2021-07-22 18:01:41
213阅读
viewpointcss3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。“viewpoint” = window sizevw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, 最小
1vmax = 1vw or 1vh, 最大兼容性：chrome 20+/ safari 6+/ IE
转载
2024-01-15 00:40:05
79阅读
层叠样式表的优点更多排版和页面布局控制
可控制字号、行间距、字间距、缩进、编剧以及定位样式和结构分离
页面使用的文本格式和颜色可独立于网页主体（body区域）进行配置和存储样式可以存储
允许将样式存储到单独文档并将其与网页关联样式变得更小网站维护更容易配置层叠样式表内联样式
将代码直接写入网页的主体区域嵌入样式
在网页页头区域（<head></head>之间)定义外部样式
转载
2023-11-21 22:10:23
44阅读
# CSS 适配 iOS 的详细指南
作为一名开发者，确保你的网站在不同设备和操作系统上显示效果良好是非常重要的。特别是在 iOS 设备上，由于其独特的浏览器和渲染引擎，开发者需要一些特别的技巧来保证网页的兼容性。本文将引导你完成 CSS 适配 iOS 的全流程，并提供必要的代码示例。
## 流程概览
我们将整个适配过程分为以下几步：
| 步骤 | 描述
在移动开发中，尤其是针对iOS的布局和样式调整，适配不同设备和浏览器环境的CSS问题常常让开发者头痛不已。本文将详细记录如何解决“适配iOS CSS”的问题，包含从环境准备到集成步骤、配置详解、实战应用以及排错指南和生态扩展等内容。
## 环境准备
在开始之前，我们需要确认我们的技术栈兼容性。以下是一个关于技术栈匹配度的四象限图，帮助我们了解不同技术的适配能力。
```mermaid
quad
# CSS iOS 适配
在移动端开发中，适配不同设备尺寸是一个重要的问题。针对iOS设备的适配，我们可以使用CSS来实现。本文将介绍iOS适配的基本原理，并提供一些代码示例。
## 基本原理
iOS设备的屏幕分辨率和像素密度不同，所以需要进行适配来确保在不同设备上的显示效果一致。iOS设备的适配通常包括以下几个方面：
1. 基准像素：iOS设备以点（pt）作为基准像素单位，而不是像素（p
原创
2024-01-21 04:24:11
68阅读
