前端-响应式布局

1.使用vw,vh,rem

@function vw($px) {
  @return ($px / 1920) * 100vw;
}

@function vh($px) {
  @return ($px / 1075) * 100vh;
}

@function rem($px) {
  @return ($px / 100) * 1rem;
}

2.媒体查询

@media (max-width: 860px){
  .choose-button {
    position: relative;
    width: 100%;
    margin-bottom: 0;
    .px2rem(height, 92);
  }
}
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
Image placeholder
Nay_said
未设置
  82人点赞

没有讨论,发表一下自己的看法吧

推荐文章
Spring Boot 中的响应式编程和 WebFlux 入门

Spring5.0中发布了重量级组件Webflux,拉起了响应式编程的规模使用序幕。WebFlux使用的场景是异步非阻塞的,使用Webflux作为系统解决方案,在大多数场景下可以提高系统吞吐量。Spr

如何理解react响应式

如何理解react响应式React中响应式原理1、开发者只需关注状态转移(数据),当状态发生变化,React框架会自动根据新的状态重新构建UI。2、React框架在接收到用户状态改变通知后,会根据当前

前端不得不了解的 Flex 布局

背景 又双叒叕被老大拉来顶替前端小姐姐撸代码,接触到了Flex布局,以前只听过没用过,碰巧这次要揭露她的面纱,就记录一下。接触前端的同学都应该知道网页布局是CSS的一个重点,布局的传统方案都是基于盒

前端不得不了解的 Flex 布局

背景 又双叒叕被老大拉来顶替前端小姐姐撸代码,接触到了Flex布局,以前只听过没用过,碰巧这次要揭露她的面纱,就记录一下。接触前端的同学都应该知道网页布局是CSS的一个重点,布局的传统方案都是基于盒

10亿美元!苹果收购Intel大部分芯片业务,晚半步布局5G芯片能赶上华为高通么?

大数据文摘出品作者:易琬玉、曹培信2200名英特尔员工,17000项无线技术专利,伴随着苹果在今天凌晨官宣收购英特尔大部分5G基带业务,都将逐渐流向苹果。这也意味着,继高通、华为、三星、联发科、紫光展

鲲鹏人才培养计划发布 看华为云的鲲鹏生态布局

近日,以“智能化:为经济赋能,为生活添彩”为主题的2019中国国际智能产业博览会在重庆举行。本届智博会不仅汇聚了来自全球智能技术领域的大咖,也吸引了众多国内外知名企业。华为在智博会期间举办了【重庆·选

软件定义IT基础架构,如何看待深信服的产品战略布局?

在很多人的潜意识里,深信服是一家令人尊敬的企业,技术支撑能力强,产品种类多,功能全面,后劲足,是少数能和华为、新华三同台竞技的企业之一。但有时候,深信服也会被这些优势所累,比如经常会被问道:你们和华为

深度盘点丨华为云数据库布局及研发路线图

“华为是个可怕的对手,一旦下定决心做某件事,鲜有做不成的。”这句在圈内少有达成共识的话,也正在一步一步得到应验。很多人或许以为,华为的优势并非软件而是硬件,但其实在数据库软件领域,华为也玩得风生水起华

css3布局方式有几种

css3布局方式有几种css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。下面我们来看看各种布局的效果吧。一、多栏布局——栅格系统栅格系统就是利用浮动实现的多栏布局,在

css栅格布局图文详解

圣杯布局圣杯布局是一种三列布局,两边定宽,中间自适应:css:*{ box-sizing:border-box; } html,body{ width:100%; height:100%; margi

CSS常见布局问题

1、多元素水平居中实现一下效果:平常人看见题目,最初感觉实现图片中的效果不难,设置小黑框的宽高边距,字体水平垂直居中即可。其实,题目应该实际上是考察多元素水平居中,即无论元素(小黑框)基数为多少,它们

为什么使用div css布局?

提起DIV+CSS组合,还要从XHTML说起。XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求。为什么

分享一个可视化开发vue框架下的各类ui的web在线表单设计布局器

新手发帖,第一次不小心刷新了一下就没了本人刚入门vue,偶然间发现这款布局器挺好的,可视化开发element所以分享给大家网站地址:http://lowcode.magicalcoder.c...嵌入

css flex布局的优缺点是什么?

Flexbox布局(FlexibleBox)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局(基于一维),即使他们的大小是未知或者是动态的。(这里我们称为Flex)。Flex布局主要

css grid布局的优缺点是什么?

Grid(网格)布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格;能够将网页分成具有简单属性的行和列来完成我们需要的网格布局。grid布局的优点:1:固定和灵活的轨道尺寸2:可以使用行号,

JVM内存布局

   JVM中将内存分为若干部分:堆、方法区、虚拟机栈、本地方法栈、程序计数器             程序计数器:该区域是内存中较小的一块区域---是当前线程在执行的字节码的行号指示器。程序计数器是

选择器和介绍CSS布局笔记

css选择器: 1.元素选择器,例如:p{}; 2.类选择器,例如:.box{}; 3.ID选择器,例如:#box{};

DIV+CSS页面布局笔记

浮动属性:float:none/left/right(display属性将失效,clear清除后不能再使用)定位属性:position:relative(相对定位)/absolute(绝对定位)/fi

降低 80% 的读写响应延迟!我们测评了 etcd 3.4 新特性(内含读写发展史)

导读:etcd作为 K8s集群中的存储组件,读写性能方面会受到很多压力,而 etcd 3.4 中的新特性将有效缓解压力,本文将从etcd 数据读写机制的发展历史着手,深入解读 etcd 3.4 新特性

前端微服务在字节跳动的落地之路

不少前端团队都面临着独石应用的工程巨大、理解困难和合作混乱的种种问题,微前端或许是一种比较好的解决方案,它允许我们为应用加入新功能而不影响整体结构。但同时,我们可能会付出一些代价,例如重复依赖、团

深度解读当代前端架构演进与趋势(上)

软件架构的核心思想,就是推断软件系统各个组件之间数据流动的方式。软件架构的质量取决于你设法推断这些数据流的难易程度!本文要讲的内容,就是在今天的Web应用程序背后探索这些数据流和最终的体系结构。We