关于移动端页面布局与设备适配

最新推荐文章于 2021-06-10 18:34:35 发布
最新推荐文章于 2021-06-10 18:34:35 发布
阅读量410 收藏
点赞数
分类专栏： 移动rem端 文章标签： 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a3216291662/article/details/52937022
版权

一般我们采用两种布局：

布局一：百分百布局

布局二：等比缩放布局

页面布局 一般采用的是 flexbox  次而选择 注意慎用float

图片 首选百分比，次而选择rem

业务字体不要用rem 使用px即可

盒模型统一使用box-sizing:border-box

像素实现：设置伪元素，根据dpr将伪元素宽高放到相应的倍数，再应用transform:scale来缩小相应倍数

冰岛大白菜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html5 移动端适配
GreatBoy
01-23 4050
未来肯定是移动端的天下，接下来谈谈h5移动端的布局问题，目前有三种 1、百分比布局 —–>有点兼容性好，缺点布局的时候需要计算比较麻烦，不过可以采取工具或脚本实现。 2、flex布局 —–>目前看来兼容还是有一定问题，尤其是低版本andriod 3、rem布局 —–>目前比较推崇的布局方案，感兴趣的可以看看淘宝的flexible 我的布局方案一、定宽布局 我先解释一下原理
移动端页面布局
小王的博客
07-29 2850
流式布局、弹性盒布局、媒体查询、Rem布局、Sass
移动端适配布局
02-23 168
适配问题整理： 一、响应式： 1.移动端需要设置meta标签 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"> 其中： ①、width=device-width：是设置可视区宽度等于设备宽度 ...
移动端布局与适配
weixin_33828101的博客
12-26 223
grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。 移动端页面适配———多方案解析 在移动互联网快速发展的今天，手机的种类和尺寸越来越多，作为前端的小伙伴们可能会越来越头疼。对于移动端适配，不同的...
移动端布局适配
weixin_43909743的博客
06-10 139
前言 接收一个之前的项目，这里的适配布局使用的是原生监听，重写登录页面存在，键盘弹起导致页面适配变形 重写移动适配 (function(win) { var tid; function refreshRem() { let designSize = 750; // 设计图尺寸 let html = document.documentElement; let wW = html.clientWidth;/
移动端1：布局与适配
斜光的博客
05-19 205
测试 1 模拟器 2 XAMPP服务器真机测试 1. 把页面放入服务器环境（XAMPP根目录下的） - 查看本机ipv4地址 2. 将移动设备和电脑连入同一个局域网 在移动设备的浏览器中，输入电脑的ip地址，访问页面文件 视口设置 视口：可视区的显示窗口 当视口没有设置时，默认 width: 980px 因为涉及到等比缩放，所以能在320px宽度放入980px的像素 viewport <meta name="viewport" content="width=device-width,
移动端rem布局与高清适配
03-15
移动端rem布局与高清适配的知识点非常丰富，包括屏幕尺寸、像素、PPI、Retina屏幕特性、逻辑像素与物理像素、devicePixelRatio、viewport等概念，以及移动端1px问题的解决方案和对flexiable的改良。以下是对这些知识...
仿京东移动端首页布局（固定尺寸、rem适配、vw适配）
08-23
仿京东移动端首页布局，包括固定...我们可以通过在不同移动端设备上展示移动端网页，发现固定尺寸布局的不足之处，以及rem适配、vw适配的原理。 其中vw适配的网页css使用的是scss语法，使用了函数、变量、嵌套等语法。
移动端REM布局与ViewportVW布局的实例运用
08-10
在移动端Web开发中，适配不同的屏幕尺寸是一项挑战。两种常用的解决方案是REM（Root Em）布局和Viewport Width（VW）布局。这篇文章将深入探讨这两种布局方式，并通过实例来展示它们在JavaScript和CSS中的应用。 **...
详解H5 活动页之移动端 REM 布局适配方法
09-27
在移动Web开发中，H5活动页的布局适配是一个重要的环节，特别是在追求设计精确还原和跨设备兼容性的情况下。本文将深入探讨移动端REM布局的适配方法，这是H5活动页实现响应式设计的关键技术。 首先，我们需要理解...
移动端的适配及布局
weixin_34133829的博客
11-24 114
一. 像素 屏幕分辨率 指在横纵坐标的像素点，单位是 px，1px = 1 像素点 iphone6 750*1334 屏幕像素密度：屏幕上每英寸可以显示的像素点的数量 屏幕分辨率，像素密度都是设备厂商规定的，不能修改 像素 物理像素：任何设备的物理像素的数量都是固定的，它是屏幕能显示的最小粒度。 CSS像素...
移动端自适应适配布局的方法总结
小妖精来啦的博客
10-23 5334
方法一：rem布局（个人最喜欢的方法） 首先确定你的设计稿是基于iphone6还是iphone4/5： 如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem 如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem (1).对视口做如下设置： &lt;meta name="vi...
移动端如何布局适配
QqDaBin的博客
11-11 281
1.移动端布局自适应不同屏幕的几种方式。 （1）.响应式布局 （2）.100%布局（弹性布局） （3）.等比例缩放（rem） 2.移动端常见的适配不同屏幕大小的方法。 响应式布局： 简而言之，就是页面元素的位置随着屏幕尺寸的变化而变化，通常会用百分比来定位，而在设计上需要预留一些可被“压缩”的空间。 Cover布局： 就跟background-size的cover属性一样，保持页面的宽高比，取宽或...
布局文件适配不同分辨率设备
stand up
09-27 336
angular移动端项目屏幕适配方案 (比rem方案更好) - postcss-px-to-viewport
qq_42753705的博客
05-20 2454
1> npm i @angular-builders/custom-webpack --save-dev (angular项目本身不允许配置，步骤 1 2为它添加自定义配置) 2>修改angular.json "architect": { ... "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": {
anguler 画面布局适应屏幕大小_angularjs 页面自适应高度的方法
weixin_39626298的博客
12-20 1319
需求在angularjs构建的业务系统中，通过ui-view路由实现页面跳转，初始化进入系统后，右侧内容区域需要自适应浏览器高度。实现方案在ui-view所在的Div添加directive，directive中通过element.css初始化计算div的高度，动态更新div高度directive监听($$watch)angular的$digest，实时获取body高度，动态赋值model或elem...
H5移动端—移动端布局及适配
jiaojsun的博客
10-19 1315
1.移动端基本环境 viewport视口(可视区窗口) 默认不设置viewport一般可视区宽度在移动端是980 width可视区的宽度(number||device-width) user-scalable是否允许用户缩放(yes||no)iOS10无效(我们放在事件章节解决) initial-scale初...
窗口移动消息值_前端基础：必须要知道的移动端适配（4）——视口
weixin_39598501的博客
11-24 180
视口(viewport)代表当前可见的计算机图形区域。在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的UI， 菜单栏等——即指你正在浏览的文档的那一部分。一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口，它们在屏幕适配中起着非常重要的作用。 布局视口布局视口(layout viewport)：当我们以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。当这...
前端移动端适配总结
weixin_33890526的博客
10-17 2869
meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片...
移动端rem布局与高清适配深度解析
移动端rem布局与高清适配是现代移动开发中至关重要的一部分，特别是在处理不同屏幕尺寸和像素密度的问题上。rem（root em）是一种基于相对单位的布局方式，它通过设定html元素的font-size属性来调整整个页面的布局，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值