css前端页面自适应记录

最新推荐文章于 2024-09-07 01:53:51 发布

原创最新推荐文章于 2024-09-07 01:53:51 发布 · 413 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种通过在HTML页面入口函数中加入特定代码来获取屏幕宽度并转换为基数的方法，以此实现字体大小的自适应调整。同时推荐使用pxCook工具进行PSD文件的处理，将宽度和高度转化为rem单位，确保网页在不同设备上都能保持良好的视觉效果。

1.html页面入口函数加入下一段，获取屏幕宽度/10,得到基数。

 window.onresize = function (ev) {
            $('html').css('fontSize',(document.body.offsetWidth / 10) + 'px')
        }

2.使用pxCook https://www.fancynode.com.cn/pxcook 工具打开psd，使用上面获取到的基数填入到 pxCook工具中，获取对应的width、height 都为 rem，即可实现自适应

ps：前端小哥哥推荐！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

宁漂打工仔

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕

weixin_41346436的博客

07-04

4489

在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。

前端页面实现自适应

01-08

pc端 1.用js计算 1rem = html之font-size 根据设计图 1366宽 html设置100px 100px的元素==1rem 比如实际浏览器 2732 宽同样设置1rem ，那根元素要设置多少，使俩者比例一致 1366:100=2732:x 得x=200 html设置font-size=200px 而其他元素设置的rem不用变化 var deviceWidth（不考虑兼容性可使用vw,vh获取视图窗口viewport宽高） setHtmlFontSize() if (window.addEventListener) { window.addEventListener(

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

自适应的前端页面

Hello_Jay66的博客

02-23

353

PC端 1.用js计算 1rem = html之font-size 根据设计图 1366宽 html设置100px 100px的元素==1rem 比如实际浏览器 2732 宽同样设置1rem ，那根元素要设置多少，使俩者比例一致 1366:100=2732:x 得x=200 html设置font-size=200px 而其他元素设置的rem不用变化每个单位大小用实际值除以100得到相对的re...

flex 初学

gong1422425666的博客

09-01

502

flex-direction 主轴的排列方向.box { flex-direction: row | row-reverse | column | column-reverse; }justify-content 项目在主轴上的对其方式.box { justify-content: flex-start | flex-end | center | space-between | space

前端页面如何自适应--4种方法

weixin_46991199的博客

02-19

4661

前端页面如何自适应--4种方法

前端页面大小自适应的问题

m0_56698268的博客

08-13

6193

解决前端页面屏幕大小自适应的问题

vantUI css文件H5自适应REM处理项目

03-13

该项目主要关注的是在 H5 页面开发中，如何利用 vantUI 的 CSS 文件并结合 REM 单位实现自适应布局。REM（Relative Em Unit）是一种相对单位，以根元素（通常是 html 元素）的字体大小为基准，使得页面元素的尺寸在...

CSS/SCSS/LESS和自适应布局/响应式布局详解

故里2130

02-13

5106

在开发前端的时候，界面布局尤为重要，要布局的非常合理，好看，css是必不可少的，然后是各种布局，使用这些布局，进行混合搭配，最终的目的都是开发一个完整的界面。前端的技术变化是五花八门的，也是群魔乱舞的，使用的方法更是层出不穷。所以本文收集了一些个人的观点，并且进行记录。好的布局不是一下能学会的，是需要大量的实战经验，上手很快，但是精通需要一定的时间才行。

如何使用CSS实现一个自适应两栏布局

热门推荐

前端学习笔记

10-12

2万+

前端自适应实现方法（移动端）

前端页面自适应设置

Rex的博客

11-03

1268

根据UI设计稿和设备尺寸的大小比例，动态计算并更改html根元素字体大小，页面使用rem单位自适应缩放。对于一些引入的库，例如swiper、antd carousel 中是不能转换的，只能转自定义的内容。要求： 1220 < 内容

前端页面自适应的7种办法

mao871863224的博客

04-11

9240

项目开发中经常遇见需要自适应页面的办法，下面总结几种经常用到的，欢迎补充～

移动端页面适配方案

weixin_42114053的博客

09-23

1394

获取布局视口的宽度：document.documentElement.clientWidth 获取设备css像素（屏幕尺寸）：window.screen.width <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> width：控制 layout viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为

前端自适应

chaitong2204的博客

09-25

411

viewport 1.viewport的概念每一个移动端页面在其背后，都有一个比实际屏幕大的虚拟的视窗，这个虚拟窗口就是viewport，其主要目的就是将完整的页面呈现给用户，如果实际宽度大于移动屏幕的宽度，网页就会横向滚动条。 2.viewport的分类 1）layout viewport——布局视窗那些为桌面设计的网站也能在移动浏览器上正常显示的宽度 2）visual view...

css页面自适应

Larry的博客

05-13

1042

1.CSS中 width:calc(100%-280px) 使用calc动态计算需要注意一些事项： 1.运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 2.任何长度值都可以使用calc()函数进行计算； 3.calc()函数支持 “+”, “-”, “*”, “/” 运算； 4.calc()函数使用标准的数学运算优先级规则； 2.VH VW 视口长度单位视口即为可视窗口 vw : 相对于视口的宽度，1vw 等于视口宽度的1%（总视口宽度为100vw） vh : 相对

DarkRP网站模板：HTML/CSS/JS自适应设计

结合标签中的“HTML, CSS, JavaScript”，可以推断出该项目采用了标准的前端三件套技术栈：HTML负责页面内容结构，CSS控制视觉表现与动画效果，JavaScript则赋予页面交互能力，例如轮播图切换、下拉菜单响应、表单...