展开

关键词

CSS&HTML面经专题——(四)端响应式

CSS&HTML面经专题——端响应式 1、Viewport视口 在端viewport视口(pc端没有这个概念)就是浏览器显示页面内容的屏幕区域。 视觉视口不会影响视口的宽度和高度。 固定大小——跟屏幕大小相同,在上面。 layout viewport(视口):视口定义了pc网页在端的默认行为。 也就是说,在不设置网页viewport的情况下,pc端的网页默认会以视口为基准,在端进行展示。 为了解决这个问题而衍生出来的概念就是响应式。它可以自识别屏幕宽度、并做出相应调整。网页的排版和展示的内容会有所变。 (2)概念 根据屏幕大小变化,页面的内容排版会自调整变,已呈现更好的用户体验。 5、rem,em,px的区别是什么? px 绝对单位,页面按精确像素展示。

15020

02

一、rem      1、意义:当px固定宽度不能适应不同屏幕尺寸时,需要,从而产生rem      2、rem 和 em 区别           2.1 rem: root,以根节点(html )作为参照的尺寸           2.2 em: 根据父级font-size确定大小     1em = 1font-size(父级的 )      3、随着屏幕宽度的变化,改变HTML根元素font-size ,从而控制rem值,从而达到相应效果(其他HTML子元素width等都是rem) function autoRem(){ var html = document.documentElement; 16 + 'px'; //16 是根据自己页面设定,非固定使用,以方便后续计算为准(iPhone5中320屏幕,刚好可以整除,一个屏幕刚好16rem) } //从此,假设iPhone5测试,则html      2、利用less计算能力,计算rem @r: 10rem; .main{ width: 400/@r; //400px---->40rem } 三、利用border-sizing

33790
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML

    HTML HTML四剑客-Flex,Grid,Table,Float - KeepLearning_! - 博客园 Float 浮 Table 表格 Flex 弹性 Grid 网格 弹性 html5:div 横向排列的方法。_我的成长之路! -CSDN博客_div横向排列 Flex 教程:语法篇 - 阮一峰的网络日志 Flex 教程:实例篇 - 阮一峰的网络日志 Flex 示例 网格 CSS Grid 网格教程 - 阮一峰的网络日志

    27810

    攻略

    作者:Tolonger 原文链接:https://www.jianshu.com/p/9e7e755ca281 除了百分比流式之外,rem占据了目前的热潮。 那么究竟这几种差别在哪里,对应的有什么效果,希望本文能给你一些有益的启示。除此之外还有响应式,固定宽度等。 百分比流式 这里面最知名的当属bootstrap框架的思路,他所有的组件以及模板ui均是百分比流式,单位为px.并且我们看到的大部分对端适配的页面也均是采用这种核心思想去做的,方法简单,多端共用 淘宝触屏版的前提就是viewport的scale根据devicePixelRatio态设置。js中可以通过devicePixelRatio拿到具体的设备数值。 1. 响应式这种方式在国内很少有大型企业的复杂性的网站在端用这种方法去做,主要原因是工作大,维护性难,所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位

    74160

    (最全)

    什么是Flex flex表示弹性,为盒状模型提供最大的灵活性。 align-self: auto | flex-start | flex-end | center | baseline | stretch; 端适配 01. <link href="css/bootstrap.min.css" rel="stylesheet"> 容器 ? > 字体图标 栅格系统: 栅格系统,在各个档位下,控制子元素不同 -- 各个档位下,按照各个档位下 -->

    笔记

    笔记 概念 英寸 设备的物理尺寸的单位,即屏幕对角线的长度,1英寸 = 2.54 厘米。 分辨率 屏幕分辨率/Resolution 屏幕由多少个像素组成。 视口: 手机上为了容纳为桌面浏览器设计的网站,默认视口宽度远大于屏幕宽度,为了让用户看到网站全貌,它会缩小网站。 视觉视口: 屏幕的可视区域,即物理像素尺寸。 name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 指定了视口 所以添上width=device-width的viewport meta后页面变大了(一开始页面内容小得看不清),实际上是视口变小了。

    7520

    .端常见

    6.1流式(百分比) 流式就是百分比,也称非固定像素。 通过盒子宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素限制,内容向两侧填充。 流式方式是web开发使用的比较常见的方式 max-width 最大宽度(max-height 最大高度) min-width 最小宽度(min-hight 最小高度) 6.2 flex 6.2.1传统与flex 传统 兼容性好 繁琐 限性,不能在端很好的 flex弹性 操作方便极为简单,端应用广泛 PC端浏览器支持情况较差 当我们把父盒子设为flex后,子元素的float、clear和vertical-align属性都将失效 伸缩=弹性=伸缩盒=弹性盒=flex 采用flex的元素,称为 它的所有子元素自成为容器成员,称为flex项目(flex item),简称“项目”。

    16631

    HTML&CSS07_浮和定位

    起初,我认真的时候,你不认真,现在你认真了,我却已离你有些远了。想想当时我们一起学习一起努力的日子,是不是有种莫名的喜悦。现在大家工作了,也会遇到一些前端设计的...

    52880

    web开发之flex(弹性

    1 flex 1.1传统与flex 传统 兼容性好 繁琐 限性,不能在端很好的 flex弹性 操作方便极为简单,端应用广泛 PC端浏览器支持情况较差 IE11或更低版本不支持或仅部分支持 1.2原理 flex是flexible Box的缩写,意为“弹性”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex。 当我们把父盒子设为flex后(display: flex;),子元素的float、clear和vertical-align属性都将失效 伸缩=弹性=伸缩盒=弹性盒=flex 采用flex的元素,称为flex容器(flex container),简称“容器”。 它的所有子元素自成为容器成员,称为flex项目(flex item),简称“项目”。

    17930

    HTML&CSS07_浮和定位

    起初,我认真的时候,你不认真,现在你认真了,我却已离你有些远了。想想当时我们一起学习一起努力的日子,是不是有种莫名的喜悦。现在大家工作了,也会遇到一些前端设计的...

    41190

    HTML 文件在PC&端完美自适应的技巧

    一、实现思路 参考比较常见的响应式,在PC端使用左图端右图。转换时将图片的宽度由定宽改为铺满,使标题等文字换行展示。 ? 1 邮箱渲染html的兼容性问题很多,在桌面和端渲染电子邮件大约有上百万种不同的组合方式,所以我们要找出一个最小子集来书写html和样式。 4 端web的常规优化对邮件html同样适用,比如使用更小的字体、图片格式选型和压缩、高精度图片适配retina屏、用css绘制小图标代替图片等等。 二、基本原则 1 由于 OutLook从2003版本为了安全开始便使用 Word HTML 引擎进行渲染,所以我们只能使用table,标签也只能使用table / tr / td / span / 3 style标签的支持程度非常碎片化,media query的支持更加有限,所以要用属性和style行内样式来保底。 4 邮件html里没有任何脚本。

    1.3K60

    HTML&CSS06_默认级别

    不会代码的设计不是好程序员,在这里我为同学们准备了有关HTML&CSS的一系列教学视频。

    23820

    设备HTML5页面

      

    HTML5学习

      

    勤学苦练

    与下面的代码是一致的:

    第130天:端-rem

    一、关于方案 当拿到设计师给的UI设计图,前端的首要任务就是和样式,相信这对于大部分前端工程师来说已经不是什么难题了。端的相对PC较为简单,关键在于对不同设备的适配。 之前介绍了一篇关于端rem方案,这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩方案效果更好且更容易使用。 网易云的方案总结为:根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等,态调节html的font-size大小。 纵向的单位可以全部使用px,横向的使用rem,因为设备宽度有限,而高度可以无限向下滑。 比如上图有三种登陆方式,在使用vue时,有两种方案。一是只建立一个表单用于数据绑定,点击按钮触发判断;而是有几种登陆方式建立几个表单,用一个字标识当前显示的表单。

    94440

    web开发之rem

    不同的是rem的基准是相对于html元素的字体大小。 比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size: 2rem; } rem的优势:父元素文字大小可能不一致, 但是整个页面只有一个html,可以很好来控制整个页面的元素大小。

    13851

    开发之响应

    开发之响应 1.响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行和样式的设置,从而适配不同设备的目的。 1.优点 标准化的html+css编码规范 提供了一套简洁、直观、强悍的组件 有自己的生态圈,不断地更新迭代 让开发更简单,提高了开发的效率 2.2Bootstrap 使用 在现阶我们还没有接触 Bootstrap使用四部曲: 创建文件夹结构 创建html骨架结构 引入相关样式文件 书写内容 2.3 容器 bootstrap需要为页面内容和栅格系统包裹一个.container =1200px):宽度设置为1170px 2.container-fluid类 流式容器 百分百宽度 占据全部视口(ciewport)的容器 适合于单独做开发 3.Bootstrap Bootstrap提供了一套响应式,设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自分为最多十二列 Bootstrap里面container宽度是固定的,但是不同屏幕下

    15720

    HTML之弹性

    相信大家在做html页面的时候都有过一个很脑袋疼的问题,那就是尺寸不平均,尺寸不平均会导致页面的不整齐,今天给大家分析下弹性。 弹性html中是很广泛的一个属性,他可以让你整个页面的合理化的分在平均的位置上,重要的是他可以根据的你的分辨率来改变宽度。这样就不会因为不知道怎么让整齐而抓破头了。 html+css代码: <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .big-box div class="box-1">

    </body> </html

    9630

    京东端页面(一)

    下面来逐步看看京东端页面是怎么编写构成的。 首先来看看京东的端页面,如下: ? 只要搜索京东,然后F12设置端浏览器显示,刷新一下浏览器就可以看到这个端的呈现方式的了。 本篇章不写太多,先来完成整体页面上中下三大部分的设置。 ? 注意:微信展示问题 如果将这三个部分直接在body里面编写固定定位,这样下面的那部分会在微信出现无法点击的情况。 创建三大部分的的git分支 init-layout 首先在我的码云仓库中创建分支,如下: ? 然后在本地仓库更新一下,并切换分支进行开发。 ? 好了,下面就来开始编写三大部分的代码吧。 编写基本HTML结构 ? 编写好了基本html架构之后,然后到index.css中编写样式。 编写最外部div固定定位的样式。 ? overflow-y: auto; overflow-x: hidden; 好啦,这样端三大部分的就完成了。先提交代码,下一个篇章继续。

    1.8K40

    web开发之流式

    流式(百分比) 流式就是百分比,也称非固定像素。 通过盒子宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素限制,内容向两侧填充。 流式方式是web开发使用的比较常见的方式 max-width 最大宽度(max-height 最大高度) min-width 最小宽度(min-hight 最小高度) 京东首页案例 /images/jd-sprites.png) no-repeat -83px 0;     background-size: 200px; } /* 主体内容 */ /* 滑图 */ .main-content 33.33%; } .main-content .brand div img {     width: 100%; } /* 导航模块 */ .main-content .nav a {     /* 添加浮就不需要转换行内块

    19150

    相关产品

    • 物联卡

      物联卡

      物联卡是基于运营商提供物联网专用号段的物联网通信业务,该业务支持短信、无线数据通信等基础通信服务。可用于各种物联网设备的应用场景,如车联网、智能家居、穿戴设备、共享单车、移动支付、环境监测和智慧农业等。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券