移动端css适配方案

已于 2022-07-18 14:58:49 修改
阅读量1.8k 收藏 3
点赞数 1
分类专栏： 个人总结 文章标签： css css3 html
于 2022-06-14 12:02:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43850819/article/details/125272730
版权

文章目录

前言

大多数时候开发页面需要做一定适配，这里记录两种
1.设计图以PC为模板
2.设计图以移动端为模板

一、使用meta标签

首先我们需要利用meta标签对viewport进行控制(如果不知道viewport可以先干完活去了解一下，不影响使用)
content属性值：

  • width：可视区域的宽度，值可为数字或关键词device-width
  • height：同width
  • ntial-scale：页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
  • maxmun-scale = 1.0, minmun-scale = 1.0; 可视区域的缩放级别
  • user-scalable：是否可对页面进行缩放，no禁止缩放

以下的meta标签即让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放；如果不这样设定好就会使用比屏幕宽的viewport，就会出现横向滚动条

<!DOCTYPE html>
<html lang="zh-CN">
最低0.47元/天 解锁文章
白菜new
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
css移动端适配最佳实践
发果叁
01-03 525
可以动态设置meta的的缩放比，主要是根据设备宽度与目标设计稿形成像素比scale，假设设计稿是750的，那么我们的就是375,设计稿量的尺寸就是10px,网页上所写的元素也是10px,因为scale=1,随着不同分辨率scale的值也会发生变化* rem适配，浏览器默认，当我们根时，我们利用rem单位设置元素单位，1rem=10px,所以当设计稿750像素时，量尺寸20px,那么你实际单位换成rem时，就是2rem,原有尺寸缩小10倍即可，这种方案会有一定误差，但也基本满足移动端自适应*
H5移动端适配 Flexible方案
09-01
《H5移动端适配Flexible方案详解》 在移动互联网时代，H5页面的适配问题显得尤为重要，尤其在各种屏幕尺寸、分辨率各异的设备中，如何确保页面在不同设备上呈现一致的效果，这就是Flexible方案的核心所在。本文将...
CSS知识点汇总(十)--移动端适配
qq_42445025的博客
06-29 1783
rem（font size of the root element）是指相对于根元素的字体大小的单位，如果我们设置 html 的 font-size 为 16px，则如果需要设置元素字体大小为 16px，则写为 1rem。设置 viewport 的 width 为 device-width，改变浏览器 viewport（布局视口和视觉视口）的默认宽度为理想视口宽度，从而使得用户可以在理想视口内看到完整的布局视口的内容。页面上所有的元素都得在不同的 @media 中定义一遍不同的尺寸，这个代价有点高；
前端知识——css 之移动端适配方案vw、rem详解
weixin_42771853的博客
04-04 6039
px是pixel单词的缩写，翻译为像素。像素是影响显示的基本单位。像素单位常见的有三种像素名称：设备像素（也称之为物理像素）；设备独立像素（也称之为逻辑像素）；CSS像素设备像素，也叫物理像素。设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了我们在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小比如iPhone X的分辨率 1125x2436，指的就是设备像素设备独立像素，也叫逻辑像素。
css实现不同设备适配
最新发布
程序员—威廉
06-05 511
通过设置容器的`display: grid`属性，并使用`grid-template-columns`、`grid-template-rows`和`grid-gap`等属性，可以实现在不同设备上自动调整网格的列数、行数和间距。通过设置容器的`display: flex`属性，并使用`flex-wrap`、`justify-content`和`align-items`等属性，可以实现在不同设备上自动调整元素的位置和尺寸。例如，可以使用`width: 50%`来设置元素的宽度为其父元素宽度的一半。
CSS移动端适配方案
m0_71485750的博客
08-05 2696
移动互联网的快速发展，让人们已经越来越习惯于使用手机来完成大部分日常的事务。前端我们已经学习了大量HTML、CSS的前端开发知识，并且也进行了项目实战；这些知识也同样适用于移动端开发，但是如果想让一个页面真正适配于移动端，我们最好多了解一些移动端的知识；移动端开发目前主要包括三类原生App开发（iOS、Android、RN、uniapp、Flutter等）小程序开发（原生小程序、uniapp、Taro等）Web页面（移动端的Web页面，可以使用浏览器或者webview浏览）...
css关于自媒体@media手机端自适应适配
weixin_43565197的博客
08-08 1327
html, body { height: 100%; }@media only screen and (min-width: 320px) and (max-width: 352px) { html { font-size: 45px; } } @media only screen and (min-width: 352px) and (max-width: 640px) { html { font-size: 50px; } } @media only screen and (min-width: 640
vue3移动端适配的解决方案（老方案）
12-01
- **适配库**：如 Vuetify、Element Plus 等 UI 库提供了预设的移动端适配方案。 5. **项目 Demo 分析**： 文件名 "vue3-page-adapter-pc-m" 暗示这是一个包含移动端和桌面端适配的 Vue3 页面示例。可能包含了...
移动端前端适配方案(总结)
01-19
首先，谈一下目前为止出现的一些关于移动端适配的技术方案： （1）通过媒体查询的方式即CSS3的meida queries （2）以天猫首页为代表的 flex 弹性布局 （3）以淘宝首页为代表的 rem+viewport缩放 （4）rem 方式 1...
移动端适配方案.doc
03-13
移动端适配方案 移动端适配方案是指在移动设备上显示网页内容的技术方案，旨在解决移动端屏幕尺寸和像素密度的差异对网页显示的影响。下面是相关的知识点： 1. 像素视口概念 * 像素是屏幕上一个个发光的小点，...
vue 移动端适配方案详解
10-17
在开发Vue移动端应用时，适配方案的选择至关重要，以确保应用在不同尺寸的设备上都能呈现出良好的用户体验。本文将详细介绍两种常见的Vue移动端适配策略：rem布局和lib-flexible插件实现。 一、rem布局 rem（root ...
div+css float 布局，适配手机
08-31
看了高洛峰老师的div+css视频教程，不错。 模仿里面的实例，写了个简单的页面，float布局，在手机上显示也可以。 比较简单的演示，对布局有了更多的了解
响应式设计css+兼容手机+平板+电脑PC 跨屏响应式布局前端开发CSS框架
05-06
响应式css+兼容手机+平板+电脑PC 拼图跨屏响应式布局前端开发CSS框架-综合示例
CSS3自适配手机屏幕
我以我名，行我道！
02-21 6056
用CSS3写的自适配手机屏幕【请使用支持html5的浏览器查看效果，如火狐浏览器，谷歌浏览器，IE9等】   Media Query Demos【CSS3自适配手机屏幕】 .wrapper {  border: solid 1px #666;   padding: 5px 10px;  margin: 40px; } .viewing-area sp
CSS实现手机信号条
Haines
09-19 1083
CSS实现手机信号条
移动端应该如何动态设置字体大小？
weixin_33897722的博客
12-23 265
rem由来：font size of the root element，那么rem是个单位，单位大小由它第一代老祖宗的font-size的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康，因为不仅要知道rem是个单位，更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB。 事故造成原因：1.px单位在...
h5开发网站-css实现页面的背景固定定位；以及安卓ios手机端兼容问题
weixin_48596030的博客
09-05 1089
在页面滚动时，背景图片保持不变，而不是跟随滚动。
css pc大小屏适配及h5手机屏幕兼容 rem
web修理工
06-01 1957
@media查询比较适合pc 屏幕适配 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&.
css 适配手机深色模式
qq_34648151的博客
06-12 2143
背景 iOS和安卓分别从 iOS 13 和 Android 10（不同厂商不尽相同，部分 Android 9 也支持） 开始加入深色模式的支持，各大浏览器纷纷开始支持深色模式，微信 iOS 客户端 7.0.12、Android 客户端 7.0.13 也支持了深色模式，网页端适配深色模式后将更进一步提高用户体验的一致性。 如何切换深色模式 iOS：“设置”–“显示与亮度”–“外观”，选择“深色” Android（不同厂商可能略有差别，名字也不尽相同）：“系统设置”–“显示”–“深色模式”。 适配指南 微信内置
移动端高清、多屏适配方案
02-26
"本文主要探讨了移动端高清和多屏适配的方案，涉及视觉稿的制作规范、设备像素与独立像素的概念以及设备像素比（dpr）的重要性。在开发移动端H5页面时，需要考虑不同分辨率和屏幕尺寸的手机，确保页面在各设备上的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白菜new

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值