自适应的前端页面

最新推荐文章于 2024-04-11 16:05:19 发布
最新推荐文章于 2024-04-11 16:05:19 发布
阅读量256 收藏 1
点赞数
文章标签： css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hello_Jay66/article/details/104461714
版权

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得到相对的rem值。

2. media query，多媒体查询模块

用法和上面相同
在这里插入图片描述

移动端

比如设计图375px
在这里插入图片描述

Hello_Jay66
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端页面实现自适应
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(
移动端页面适配方案
weixin_42114053的博客
09-23 1103
获取布局视口的宽度：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 为设备的宽度（单位为缩放为
前端页面自适应的7种办法
最新发布
mao871863224的博客
04-11 1370
项目开发中经常遇见需要自适应页面的办法，下面总结几种经常用到的，欢迎补充～
css前端页面自适应记录
SpringHASh的博客
05-12 334
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、heigh..
flex 初学
gong1422425666的博客
09-01 428
flex-direction 主轴的排列方向.box { flex-direction: row | row-reverse | column | column-reverse; }justify-content 项目在主轴上的对其方式.box { justify-content: flex-start | flex-end | center | space-between | space
前端实现背景虚化但内容清晰且自适应 的实例代码
01-19
讲干货，不啰嗦，有时候前端会遇到背景虚化但要求内容清晰的需求，先看效果： 以下为具体实现： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>背景虚化</...
H55_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
H55_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
自适应 页面模板.rar
03-06
自适应网页 可任意修改 简单快捷
扁平自适应网站HTML5模板
06-01
使用类似Microsoft Webmatrix软件作为网站打开文件夹，在html格式文件中进行自定义修改即可。
前端自适应
chaitong2204的博客
09-25 344
viewport 1.viewport的概念 每一个移动端页面在其背后，都有一个比实际屏幕大的虚拟的视窗，这个虚拟窗口就是viewport，其主要目的就是将完整的页面呈现给用户，如果实际宽度大于移动屏幕的宽度，网页就会横向滚动条。 2.viewport的分类 1）layout viewport——布局视窗 那些为桌面设计的网站也能在移动浏览器上正常显示的宽度 2）visual view...
bootstrap实现的自适应页面简单应用示例
08-31
主要介绍了bootstrap实现的自适应页面简单应用,结合具体实例形式分析了基于bootstrap的列表布局结构页面实现与使用技巧,需要的朋友可以参考下
echarts 实现大屏自适应展示
10-14
echarts 实现大屏自适应展示
前端自适应实现方法
热门推荐
前端学习笔记
10-12 1万+
前端自适应实现方法（移动端）
vue前端页面自适应解决方案
qq_37704442的博客
02-16 1671
vue前端页面自适应解决方案
前端自适应布局
Xiang_Gong_Ya_的博客
11-10 1014
前言 在最初接触前端的时候，就发现屏幕的宽度是不固定的， 而ui设计图是不固定的，开始的时候就没想到很好的布局 现在想想，这是不好的，不能实现良好的布局，不能自适应 其实有很多自适应的布局方式，以前我总是想使用%布局方式，但是发现全部都换算成%太麻烦了，所以总结了对我最满意的布局方式，那就是rem布局方式 rem <!DOCTYPE html> <html style="font-size: 10px;"> 设置html根字号的大小，不设置为浏览器的默认字号16px(设置为10
【前端】页面自适应
lorogy的博客
11-25 5622
解决方案一 整体布局：flex+百分比 box-sizing: border-box css字体设置：rem margin\padding : vh echarts图表字体：自定义一个fontSize(num)函数，在大屏调好合适的数，在option配置参数时使用fontSize(20) //util.js export const fontSize=function(num){ let ...
html前端笔记-页面自适应
weixin_44177447的博客
05-22 270
//所有笔记都来源网络，都自己编码成功过的 //如有错误欢迎指正，如有更优解欢迎讨论 1. width自适应很好解决： width: 100%; 2. 高度设成height: 100%;页面不会随着屏幕高度而自适应，因为浏览器不会计算页面高度，只会给你弄个滚动条给你 所以在设高度成%时，要先设置过： css加入 body, html { width: 100%; height: 100%; } 3. 字体大小自适应： 先在css中设置： body { text-align: center; fo
前端页面改成自适应各种设备
03-24
对于前端页面自适应各种设备的问题，可以通过使用响应式设计来实现。这可以通过使用CSS媒体查询和弹性布局来实现。媒体查询可以根据不同的设备屏幕尺寸和方向来应用不同的CSS样式，而弹性布局可以根据设备屏幕的大小...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值