草庐IT

rem布局实现静态页面之适配方案1

Allerge 2023-03-28 原文

这部分内容是最近重新复习移动端,做页面时的笔记,这是发布的第一篇关于rem布局实现。内容大致分为页面实现过程中的重新复习到的不确信内容和未掌握内容,和在页面实现中出现的问题和解决。

技术选型

方案:采用单页面设计

技术:rem,媒体查询,less

设计图:750px

内容整理:

*创建common.less是为了供所有页面使用其中样式

*在less文件中引入less文件的方法是 在index.less中引入common.less @import 'common'

@import是由css提供,只有在ie5以上才能被识别,引用的css会在页面加载完后才会加载引用的css;可以将一个样式文件导入另一个样式文件里 @import '文件名'

link属于html标签,页面加载的时候会被同时加载,不存在浏览器兼容问题,引入样式的权重大于@import,link是把一个样式文件引入带html页面里去

flex

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

display:flex;不会让容器本身取消它的块装的属性,但它的子元素会变成行内块的的属性

它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间 。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式:

  • 在不同方向排列元素
  • 重新排列元素的显示顺序
  • 更改元素的对齐方式
  • 动态地将元素装入容器

input type类型

text,password,密码框,radio单选框,checkbox复选框,

button按钮,file上传文件,image提交式图片,submit/reset提交/重置按钮

outline:点击input时会出现一圈的蓝色边框

outline:none;去除就不显示了

因为box-sizing盒子默认为content-box

在input中想要使用padding调整文字显示的位置时使用padding会变大盒子,影响后面的布局,所以只有把box-sizing:border-box;写上去就可以解决这个问题

判断一部分需不需要设置宽高来适应页面变化

你直接在没有任何设置的情况下调整页面窗口大小,发现内容偏离或者显示不全,那就是需要设置固定宽高才能适应页面变化,采用rem控制.

父级边框塌陷的原因

父级是没有样式的div/ul等块级元素;父级盒子内部只有浮动元素,父级没有设置高度和宽度

父级盒子中子元素水平排列方法

.ad{

flex方法针对父盒子是一个行内元素,flex方法可以使其中的子元素变成行内块(触发BFC这是a没有塌陷被img子元素撑起来的原因)

display:flex;

a img{

flex:1;

width:100%;
针对这种情况使用以下代码也可以实现水平排列,但是a这个父元素塌陷,即点击时没有跳转效果,
需要再解决父盒子塌陷的问题,解决方法是给a元素的样式中添加display:block;再添加宽度高度.
*// float: left;*

// width: 33.3%;

}

}

行内元素转换为块级元素的方法

1.直接使用display:block;使元素的属性改变

2.float;浮动之后检查computed里面的元素的display也会发生改变,变为block

3.使用定位:position:fixed(固定定位)/absolute(绝对定位)

4.使用弹性盒,让父元素变成弹性盒

rem布局适配方案:

1.less+媒体查询+rem

2.flexible.js

问题集合:

1.less使用除法的时候不生效的时候,使用括号可以生效

2.为什么有宽度有高度有背景颜色但是没有显示是?

被后面覆盖了?因为行内元素里面没有写内容

因为元素是行内元素,不能设置宽高,只有里面有内容的时候才能显示出背景颜色

4.设置background:url();属性插入了背景图片,这个元素也设置了大小,但是窗口变化得很小的时候背景图片就看不到了,图片不能跟着页面一起变化?

因为元素设置了rem为单位的宽和高,所以它的大小是会随设置的媒体查询结果改变,但是背景图的大小是由bacjground-size设置的,因为没有设置这个,所以没能实现一同变化

有关rem布局实现静态页面之适配方案1的更多相关文章

  1. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案? - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  2. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  3. ruby - nanoc 和多种布局 - 2

    是否可以为特定(或所有)项目使用多个布局?例如,我有几个项目,我想对其应用两种不同的布局。一个是绿色的,一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block,但我不知道这是怎么回事。因为,每个项目在编译过程中只编译一次,我不能告诉nanoc第一次用layout1编译,第二次用layout2编译。我试过这样的东西,但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'

  4. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  5. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  6. MIMO-OFDM无线通信技术及MATLAB实现(1)无线信道:传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括:阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下,MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中,可以获得复用增益,即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中,可以获得分集增益,即可靠性性能的改善。分集增益用独立衰落支路数来描述,即分集指数。在使用了空时编码的MIMO系统中,由于接收天线或发射天线之间的间距较远,可认为它们各自的大尺度衰落是相互独立的,因此分布式MIMO

  7. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作,这种方式比较简单,也比较容易理解。本文为大家介绍另一种不使用递归的方式,由于没有使用递归,只用到了循环和集合,所以效率更高一些!一、使用递归遍历文件夹整体思路1、使用File封装初始目录,2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组,取出每个File对象4-1、如果File是否是一个文件,打印4-2、否则就是一个目录,递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  8. ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2

    通常,数组被实现为内存块,集合被实现为HashMap,有序集合被实现为跳跃列表。在Ruby中也是如此吗?我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为,并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而,大多数Rubyist对数组的性能特征有一些期望,这会迫使不符合它们的实现变得默默无闻,因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

  9. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

  10. ruby - "public/protected/private"方法是如何实现的,我该如何模拟它? - 2

    在ruby中,你可以这样做:classThingpublicdeff1puts"f1"endprivatedeff2puts"f2"endpublicdeff3puts"f3"endprivatedeff4puts"f4"endend现在f1和f3是公共(public)的,f2和f4是私有(private)的。内部发生了什么,允许您调用一个类方法,然后更改方法定义?我怎样才能实现相同的功能(表面上是创建我自己的java之类的注释)例如...classThingfundeff1puts"hey"endnotfundeff2puts"hey"endendfun和notfun将更改以下函数定

随机推荐