响应式网站根据rem统一处理所有字体显示和布局间隔的方法

最新推荐文章于 2022-05-05 15:59:52 发布

叶川飞流

最新推荐文章于 2022-05-05 15:59:52 发布

阅读量154

点赞数

分类专栏：响应式网站

本文链接：https://blog.csdn.net/weixin_41033048/article/details/113571716

版权

本文介绍了如何利用rem单位进行响应式网站设计，通过设置根元素的font-size，实现不同屏幕尺寸下字体和布局间隔的适配，确保在各种设备上视觉效果的一致性。

摘要由CSDN通过智能技术生成

       function page_resize_special(){
   
                        var int_width = $(window).width();
                        if(int_width<=640){
   
                                $('html'

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

叶川飞流

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【CSS笔记】CSS界面布局之flex弹性盒布局、多列布局、响应式布局、网格布局

✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。

08-02

251

flex布局是W3C在2009年提出的一种新的网页布局方案，它可以更加简便、完整、响应式的实现各种网页布局，并且几乎支持所有的主流浏览器。注意：Webkit内核的浏览器，使用flex布局时，需要添加前缀。flex英文全称是flexible box的缩写，简称"无论是行内元素，还是块级元素，都可以使用flex布局。注意：在设置了flex之后，子元素的float、clear、vertical-align属性将失效。

手机端/响应式/网格布局/盒模型布局/弹性盒布局/多列布局

最新发布

weixin_53342968的博客

02-13

361

布局

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

前端学习 --响应式布局

weixin_47484273的博客

08-19

186

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

深度学习之rem 处理

测试0901-1

07-19

189

var winW = document.documentElement.clientWidth; var bodyStyle=document.documentElement.style.fontSize =winW/19.2+"px";

响应式布局

xiaoliu998的博客

03-23

177

flex-grow:;定义项目进行扩张（放大） flex-shrink:;项目总宽度超出容器时的缩小设置 0本身无变化 1平均分配 flex-basis:;项目的长度综合写法：flex:放大缩小长度；（后两者一般不写）多列布局：column-count:;分列 column-gap:;列间隔 column-rule:大小形态颜色；分割线 column-fill:;列的高度是否统...

使用rem的简单处理

马优晨

07-08

720

app.css $setMediaWidth: 750; @import '../base.scss'; @import '../place.scss'; .icon-comment { width: rc(60); //举例使用rc(传入值) height: rc(60); font-size: rc(28); color: #51576f; di...

手机屏幕适配之rem处理

weixin_44996006的博客

01-28

1072

(function flexible(window, document) { var docEl = document.documentElement; // 375屏幕的font-size是100，也就是说，iphone6的font-size是100，设计稿按照750px设计，0.01rem = 1px function setRemUnit() { var rem = docEl.clientWidth / 37.5; ...

响应式布局内容

Shelia_的博客

11-04

1132

响应式布局课堂目标掌握flex布局掌握网格布局掌握响应式布局知识点 flex 布局（弹性布局）参考分为主轴（main axis）和交叉轴（cross axis） flex容器属性： flex-direction：设置主轴的方向，默认 row row（默认值）：主轴为水平方向，起点在左端 row-reverse：主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在上沿 column-reverse：主轴为垂直方向，起点在下沿 flex-wrap：定义换行方式，默认不

移动Web开发之 rem适配布局----苏宁首页案例制作

06-23

为确保在小屏幕设备上能良好显示，可以采用栅格系统，用rem设置栅格间隔和单元格大小。 4. **推荐商品**：商品卡片的宽度和高度使用rem，卡片间的间距同样如此。图片和标题的尺寸也需用rem调整，以适应屏幕变化。 ...

rem（vw的情况下，实现不同分辨率页面的样式统一）

我的博客

05-05

429

为了方便rem的计算： html设置font-size的值：100px; 1rem == 100px 出现问题：100px不会自动适配找到一个能随着视口改变的单位 vw 下面需要研究的问题： 100px == ? vw 100px == ?vw 根据设计图先确定适配的核心设备。第一种情况：设计图为640px 设计图640px 考虑dpr 为2（dpr是设备像素与逻辑像素之比） 640px / 2 == 320px 视口的宽 320px 100vw == 320px 1vw == 3.2px

rem 处理,可以使用到移动端

qyx189573的博客

02-01

110

处理如下 // 设计图 y = 750 比例 x=100;1rem =100px; var html = document.getElementsByTagName("html")[0]; var cWidth =document.body.clientWidth || document.documentElement.clientWidth; function Setrem(x,y,w){ html.style.f

移动端页面开发适配 rem布局原理

风中追风

03-19

4698

我们拿到的设计图一般是以640，750，1080分辨率为基准设计的，而现在的手机终端各式各样，分辨率不同，逻辑像素不同，适口不同，所以为了让我们的页面在每个设备上都可以良好的展示，那么就需要为这些设备做统一的处理，这个过程就称为移动端适配。需要知道的一些概念：物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，可以理解为我们平时说的分辨率；设备独立像素(density-independent pixel)

响应式布局中边框和内边距怎么设置

fuxi0o_的博客

04-11

1855

响应式布局中经常需要通过百分比设置组件宽度。如果我们不考虑边框，很容易就能实现，但如果你给每一列元素和总宽度都用百分比设置，边框问题就会出来捣乱，因为边框的宽度是固定的。下面的方法可以完美解决这个问题，在一个流式布局中，再也不用担心边框以及内边距问题。假设我们需要一个五列的布局。我们要考虑的第一件事就是外边距（margin）.假设所有的列都需要4%的外边距，我们需要为所有的外边距保留20%（...

响应式布局中rem的用法

weixin_44803046的博客

05-27

1596

1.rem是什么呢？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。 2.为什么要用rem呢？首先我们要了解移动端最麻烦的是什么？由于不同分辨率的适配，具体来说，有的屏幕宽750px，有的屏幕宽640px，有的甚至更

关于响应式布局的字体大小设置

weixin_30443075的博客

09-02

886

原理：利用rem和js： 1.js设置html根节点的字体大小； window宽度/每行多少个字 2、rem是参照html节点的 <html> <head> <title></title> <meta charset="utf8"> <script type="text/jav...

-如何调整html页面的间距,css中字间距怎么设置？

weixin_34883242的博客

06-09

895

在前端页面制作的时候发现自己的文字之间太紧凑，想要通过css设置下字间距让文字之前的距大一点，这样更符合自己的页面布局设计，也更加美观。下面我们来看一下css设置字间距的方法。css中字间距使用letter-spacing属性设置，letter-spacing属性增加或减少字符间的空白(字符间距)。css使用letter-spacing属性设置字间距示例：.css1{letter-spacing:...

响应式 - 基于尺寸的响应式内边距

陆氪和他的那些代码

02-09

819

前言为了衬托一个响应式宽度的图像元素，需要添加相对的内边距。如果使用静态的宽度内边距，图像内边距在较小的浏览器窗口中可能会显得过大，从而与其他附近元素相互挤压，甚至可能将图像挤出屏幕。准备工作理解盒模型属性的计算是一个好的开始。一个对象所占的总宽度是它的实际宽度加上它两边的内边距，边框以及外边距，即2*（外边距+边框+内边距）+内容的宽度=总宽度。实现方式假设一张图...

针对移动端的响应式，对设计途种的框体大小，字体大小，间距大小的规范

Sunny_lxm的博客

09-10

726

针对移动端的响应式，对设计途种的框体大小，字体大小，间距大小的规范设计图以iphone6的标准给：比例值 = 7.5 统一使用 vw，高度转换成vw，而不用vh。框体大小设计图如图按钮的 width：80px;height：30px; 计算公式：（width计算后的宽度；w实际宽度） width = w/7.5 height = width/(w/H) = w...