css样式自适应手机+平板+PC

YHosiris

已于 2022-11-27 20:29:27 修改

阅读量3.1k

点赞数 2

分类专栏： java 文章标签： css 前端 html

于 2019-07-09 10:24:11 首次发布

本文链接：https://blog.csdn.net/qq_36153149/article/details/95164000

版权

java 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

css适配三端，head头部添加
在这里插入图片描述

<meta name="viewport" content="width=device-width,initial-scale=1.0,
 maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

css样式: 设备的默认大小都是16px; 设置为62.5%就是10px; 以下1rem就是10px
在这里插入图片描述
calc(40vh)是页面大小的40%高度 vw是宽

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

YHosiris

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
css样式自适应手机+平板+PC

css自适应手机平板pc
复制链接

扫一扫

专栏目录

前端移动端布局自适应 及移动端和PC端共用一套代码注意事项

weixin_43335008的博客

04-14

6557

移动端布局需要适应不同大小手机平板屏幕，所以字体图片等尺寸就要做到随着屏幕大小的变化去自适应，这样会给用户很好的体验感和美感。例如：以上就是今天要讲的内容，本文仅仅简单介绍了移动端布局注意事项。

【面试】移动端的自适应布局如何实现？

weixin_62918410的博客

03-29

2412

移动端自适应

1 条评论您还未登录，请先登录后发表或查看评论

CSS移动端适配方案，渣本大数据开发开发小伙如何一步步成为架构师

最新发布

2401_84182793的博客

04-16

916

rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的 font-size尺寸。比如如下案例1.设置一个盒子的宽度是2rem；2.设置不同的屏幕上html的font-size不同；屏幕尺寸html的font-size盒子的设置宽度盒子的最终宽度375px37.5px1rem37.5px320px32px1rem32px414px41.4px1rem41.4px这样在开发中，我们只需要考虑两个问题。

【网页开发】css关于移动端自适应以及transform的scale()缩放白边问题

小卓仗剑走天涯的博客

01-19

6008

css关于移动端自适应以及移动端transform的scale()缩放白边问题

前端知识——css 之移动端适配方案vw、rem详解

weixin_42771853的博客

04-04

6027

px是pixel单词的缩写，翻译为像素。像素是影响显示的基本单位。像素单位常见的有三种像素名称：设备像素（也称之为物理像素）；设备独立像素（也称之为逻辑像素）；CSS像素设备像素，也叫物理像素。设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了我们在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小比如iPhone X的分辨率 1125x2436，指的就是设备像素设备独立像素，也叫逻辑像素。

css移动端适配

ssjjrr的博客

10-01

382

css移动端适配

【css】移动端适配

前端学习博客

03-27

3514

【css】移动端适配文章目录【css】移动端适配一、物理像素（设备像素） && css像素（逻辑像素）设备像素比二、px、em、rem 的区别及使用场景三者的区别：使用场景：rem：三、vw 与 vh四、单位混合使用：calc()五、如何根据设计稿进行移动端适配？一、物理像素（设备像素） && css像素（逻辑像素）像素是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域，像素分为两种类型：css像素和物理像素。在pc端，通常认为css中,1px所表示的真实长

响应式设计css+兼容手机+平板+电脑PC 跨屏响应式布局前端开发CSS框架

05-06

在“响应式设计css+兼容手机+平板+电脑PC 跨屏响应式布局前端开发CSS框架”这个主题中，我们将深入探讨响应式设计的核心概念、关键技术以及如何使用CSS框架实现跨屏布局。首先，响应式设计的核心在于媒体查询...

css兼容手机、平板、PC各种分辨率的网站

05-06

10. **断点设计**：设定关键断点，根据设备类型和屏幕尺寸应用不同的CSS样式，确保在不同设备上布局都能良好展示。以上是创建一个兼容手机、平板和PC各种分辨率网站的关键CSS技术。通过这些方法，你可以构建一个在...

自适应表格，适用于PC，手机同一页面

08-31

"自适应表格"是指那些能够根据用户设备的屏幕尺寸和方向自动调整布局和展示方式的表格，确保在PC、手机和平板等不同设备上都能提供清晰、易读的用户体验。标题"自适应表格，适用于PC，手机同一页面"揭示了这个设计...

2023全新仿短视影视模版源码 PC+H5自适应明暗双皮肤苹果CMS系统

03-05

PC+H5自适应意味着该模板能够自动适应不同的屏幕尺寸，无论是台式机、笔记本电脑，还是手机和平板，都能呈现合适的布局。这主要得益于响应式设计技术，通过CSS媒体查询和流式布局，确保在任何设备上都能保持良好的...

CSS——移动端适配方案

ZKH129的博客

06-15

1198

移动端适配方案

html+css手机端自适应网页

热门推荐

Fredrik的博客

08-10

5万+

一，最近在做项目，写移动端的网页，主要是自适应的问题。bootstrap等前端框架用的不好，又不想耽误时间，不能自适应很烦人，这里给大家介绍下我的方法，也是结合了很多人的思路。 1.在头部加入这样的一行代码： <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0...

手机端自适应页面通用CSS及公用HTML写法

斌记-关于WEB前端、小程序、UI设计的笔记

07-21

1万+

把页面的通用属性全部写出来。所有的手机端新建项目时候都可以直接拿这套代码快速搭建一个手机端框架。 js中规定了页面最大宽度。为16rem。所以width：16rem；就等于width：100%；我一般喜欢把边距设置为0.5rem。所以页面一般宽度我写了15rem。 rem写法好处是，自适应手机屏，手机屏不管是大小，都完美显示，不会错位。相比用百分比写法，rem写法计算相对简单。 ...

CSS进阶之移动端适配 (四)：媒体查询、CSS常见单位、深入理解pixel、DPR、PPI、浏览器视口Viewport、移动端适配rem方案、移动端适配vw方案

Good Good Study,Day Day Up!

06-06

8953

是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。可以让我们根据设备的类型（比如：屏幕设备、打印机设备）或者特定的特性（比如屏幕的宽度）来修改页面@media@importurlmedia属性, , 和其他HTML元素指定特定的媒体类型。

前端开发实战：移动端适配CSS技巧

会思想的苇草i的博客

12-12

2078

在前端开发中，移动端适配是指利用CSS技术使网页能够在不同移动设备上呈现良好的显示效果。通过使用响应式布局、媒体查询和弹性布局等技术，开发者可以实现移动端适配，使网页在手机和平板等移动设备上具有良好的可视和交互体验。移动端适配是前端开发中的重要内容，能够提升网站的用户友好性和访问体验。

pc、移动端自适应css

hkduan的博客

03-01

1873

自适应的一些配置

纯css移动端图片的自适应

weixin_45170083的博客

04-02

2598

移动端页面，少不了图片，但是手机端要适应的平台相对较多，如果图片写死了，多平台会很难看，只有图片宽和高同时动态响应才可以。那么了解下图片的等比例适配 position: relative; background-color: #FFFFFF; width: 100%; height: 0; padding-botto...

CSS移动端适配方案

m0_71485750的博客

08-05

2696

移动互联网的快速发展，让人们已经越来越习惯于使用手机来完成大部分日常的事务。前端我们已经学习了大量HTML、CSS的前端开发知识，并且也进行了项目实战；这些知识也同样适用于移动端开发，但是如果想让一个页面真正适配于移动端，我们最好多了解一些移动端的知识；移动端开发目前主要包括三类原生App开发（iOS、Android、RN、uniapp、Flutter等）小程序开发（原生小程序、uniapp、Taro等）Web页面（移动端的Web页面，可以使用浏览器或者webview浏览）...

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交