展开

关键词

html --- rem 媒体查询

而在写CSS时,通常是以为参考的。 打开Chrome的响应式设计工具,就可以看到各种设备的,比如iPhone 5的是320*568 px,iPhone 66S的为375*667 px。 为了保证在各种上的不失真,就要根据实际做等比例换算,才能写进CSS,即满足:写入CSS的尺寸 = UI图标注的尺寸UI图 因此: 写入CSS的尺寸 = UI图标注的尺寸UI图 *比如上例,当标注尺寸为64px、UI图为1440px时,针对不同,写入CSS的属性分别为: 320px:font-size: 641440*320 = 14.22px 360px:font-size: 641440*360 = 16px375px:font-size: 641440*375 = 16.67px...1440px:font-size: 641440

36220

css初学 位置随机调整,为的50%

1 47 48 72 73 98 99 100 101 102 TTyb-css 103 104 .background105 {106 background-image:url(面向对象编程.jpg 213 214 215 216 217 218 整个页面可以同这个框架,应该可以做到文本在中间显示,已经加入整个页面,padding:10px为填充扩10px219 220 221 222 绝对定位, 位置想在哪里就在哪里223 224 225 226 227 位置随机调整,为的50%228 229 230 231 232 233 所有字段的解释都在代码里面说明了的这里就不再解释贴上页面效果: TTyb-css 返回主页还是返回主页就是返回主页404notfoundHello World! 整个页面可以同这个框架,应该可以做到文本在中间显示,已经加入整个页面,padding:10px为填充扩10px绝对定位,位置想在哪里就在哪里 位置随机调整,为的50%

32750
  • 广告
    关闭

    11.11智惠云集

    2核4G云服务器首年70元,还有多款热门云产品满足您的上云需求

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

    第118天:移动端开发——视口

    例如:width:200px 的元素跨越了 200 个CSS像素。CSS像素相当于多少个设备像素取决于的特性(是否高密)和用户进行的缩放。 在高密上,例如苹果的视网膜,一个CSS像素跨越了多个设备像素。对照下图:(红色表示CSS像素、蓝色表示设备像素)?我们在开发中,操作的是CSS像素,让CSS像素去覆盖设备像素。 所以,移动端浏览器厂商必须保证即使在窄下我们的页面可以展示的很好,他们将视口的设计得比出很多。这样。在移动端,视口与移动端浏览器就不再关联,而是完全独立的了。 布局视口还是保持在原来的。看下图说明一下视觉视口区域?如上图,红色箭头之间的区域就是视觉视口的区域。它和设备的一样,并且它的CSS像素的数量会随着用户缩放而改变。 三、总结  本篇介绍了css像素和设备像素。开发人员在开发中基本上使用的都是css像素。  介绍了三种视口布局视口:不再与移动端浏览器相关联,完全是独立的。实际上布局视口的要比出很多。

    20320

    自适应网页设计(Responsive Web Design)

    手机的比较小,通常在600像素以下;PC的,一般都在1000像素以上(目前主流是1366×768),有的还达到了2000像素。 如果大于1300像素,则6张图片并排在一行。?如果在600像素到1300像素之间,则6张图片分成两行。?如果在400像素到600像素之间,则导航栏移到网页头部。? 三、不使用绝对由于网页会根据调整布局,所以不能使用绝对的布局,也不能使用具有绝对的元素。这一条非常重要。 六、选择加载CSS自适应网页设计的核心,就是CSS3引入的Media Query模块。它的意思就是,自动探测,然后加载相应的CSS文件。    如果在400像素到600像素之间,则加载smallScreen.css文件。除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

    1.3K70

    JavaScript 获取的高

    screen.width:显示浏览器的screen.Height:显示浏览器的的高screen.availWidth:显示浏览器的的可用screen.availHeight:显示浏览器的的可用高 (这个可用高不包括分配给半永久特性(如底部的任务栏)的垂直空间。) document.body.offsetWidth:网页可见区域(包括边线的)document.body.offsetHeight:网页可见区域高(包括边线的高)? document.body.clientWidth:网页可见区域document.body.clientHeight:网页可见区域高document.body.scrollWidth:网页正文全文document.body.scrollHeight

    23720

    零碎之viewport

    浏览器的默认viewport的二、css中的1px并不等于设备的1px在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑的1个物理像素,这可能会造成我们的一个错觉 在早先的移动设备中,像素密都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个物理像素的。 例如安卓设备根据像素密可分为ldpi、mdpi、hdpi、xhdpi等不同的等级,分辨率也是五花八门,安卓设备上的一个css像素相当于多少个物理像素,也因设备的不同而不同,没有一个定论。    所有的iphone的ideal viewport都是320px,无论它的是320还是640,也就是说,在iphone中,css中的320px就代表iphone。 ?? ,只要在css中把某一元素的设为ideal viewport的(单位用px),那么这个元素的就是设备了,也就是为100%的效果。

    25040

    如何做一张属于自己的自适应网页

    手机的比较小,通常在600像素以下;PC的,一般都在1000像素以上(目前主流是1366×768),有的还达到了2000像素。 如果大于1300像素,则6张图片并排在一行。 ? 如果在600像素到1300像素之间,则6张图片分成两行。 ? 如果在400像素到600像素之间,则导航栏移到网页头部。 ? viewport是网页默认的和高,上面这行代码的意思是,网页默认等于(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占面积的 六、选择加载CSS 自适应网页设计的核心,就是CSS3引入的Media Query模块。 它的意思就是,自动探测,然后加载相应的CSS文件。 如果在400像素到600像素之间,则加载smallScreen.css文件。 除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

    55140

    07-移动端开发教程-移动端视口

    老马接下来就从初学者能看懂的角去讲解视口和适配的方案。1. 关于1.1 尺寸设备尺寸是指的对角线长。比如:iphone67是4.7寸,iphone67p是5.5寸。 在PC端的分辨率常见是:移动端常见分辨率: 在说分辨率的时候我们常常会把大的值说在前面,所以在PC端比高的值要大一点,第一个值一般是指的第二个值为高。 如果我故意设置操作系统分辨率为512*384(水平和垂直各缩小1倍),那么此时css定义的1px像素的盒子在中的显示的比原来高分辨率的增加一倍,所以CSS中的像素只是相对,不是绝对的。 由于移动端的视口可以进行放大、缩小、改变高,所以造成了视口的大小跟能显示的内容的和布局的不一致,这就出现两个概念:布局视口和视觉视口。 如果设置一个元素为100px*100px,看起来就是的100320如果布局视口的=device-width(设备,也就是:物理像素dpr)时,此时页面100%的正好能在视觉视口中完全显示

    39580

    07-移动端开发教程-移动端视口

    老马接下来就从初学者能看懂的角去讲解视口和适配的方案。1. 关于1.1 尺寸设备尺寸是指的对角线长。比如:iphone67是4.7寸,iphone67p是5.5寸。 在PC端的分辨率常见是:移动端常见分辨率: 在说分辨率的时候我们常常会把大的值说在前面,所以在PC端比高的值要大一点,第一个值一般是指的第二个值为高。 如果我故意设置操作系统分辨率为512*384(水平和垂直各缩小1倍),那么此时css定义的1px像素的盒子在中的显示的比原来高分辨率的增加一倍,所以CSS中的像素只是相对,不是绝对的。 由于移动端的视口可以进行放大、缩小、改变高,所以造成了视口的大小跟能显示的内容的和布局的不一致,这就出现两个概念:布局视口和视觉视口。 因为手机端的浏览器会自动设置布局视口的为视觉视口的,所以此时:设备的布局视口==视觉视口==理想视口。看一图就明了: 普通两倍 ?

    632120

    移动web开发之rem适配布局

    移动web开发之rem适配布局方案: 页面布局文字能否随着大小变化而变化 流式布局和flex布局主要针对于布局,那高如何布局? 怎样让发生变化的时候元素高等比例缩放? 使用@media查询,可以针对不同的媒体类型定义不同的样式 @media可以针对不同的尺寸设置不同的样式 当你重置浏览器大小的过程中,页面也会根据浏览器的和高重新渲染页面 目前针对很多苹果手机 、android手机、平板等设备都用得到多媒体查询 2.2语法规范 * 这句话的意思是:在我们上 并且 最大的是 800像素 设置我们想要的样式 * @media screen and (max-width ,就是10050 转换为rem 是2rem2rem 比例是1比1 320下,html字体大小为21.33 则2rem = 42.66px 此时和高都是42.66px 但是和高的比例还是1比1 但是已经能实现不同下 页面元素盒子等比例缩放效果 3.元素大小取值方法 最后的公式:页面元素的rem值=页面元素值(px) (划分的份数) 划分的份数 就是html font-size的大小 或者:页面元素的

    13020

    前端移动web-day03学习笔记

    html)字体大小 (统一的,一个页面只有一个html) em:参考的是元素自身字体大小 (不统一,页面的元素字体大小不一定都是一致的)3.rem使用流程 (1)设置HTML字体大小一般为 110 110在实际开发中,一般公司都会设置 1rem = 110也有的公司会设置1rem = 120也有的公司会设置1rem = 1100 这个rem的值无论是多少,都不影响它本身的作用 -layout.htmlrem布局注意点a.一般使用rem布局,都需要设置html字体大小b.实际开发中,一般设置 html字体大小 = 110 也就是说,通过动态设置html字体大小,实现 1rem = 110 c.动态设置html字体大小为手机当前 110的两种方式1.使用js代码(推荐)2.使用css媒体查询由于实际开发中一般使用js代码来动态设置html字体大小,实现1rem = 110 ,由于暂时未接触js语言,所以这里老师提前写好一个js文件,我们开发时只需要导入即可02-Less语法(CSS预处理语言)1.less语言,css预处理语言 a.浏览器只识别三种语言

    13100

    浅谈移动端中的视口(viewport)

    在 PC 端,视口指的是浏览器的可视区域,其和浏览器窗口的保持一致。在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比推算的根源,给 CSS 布局限制了一个最大。 物理像素(设备像素,device pixels)指的是设备的物理像素,任何设备的物理像素数量都是固定的。CSS 像素(CSS pixels)是 CSS 和 JS 中使用的一个抽象概念。 布局视口使视口与移动端浏览器完全独立开。CSS 布局将会根据它来进行计算,并被它约束。 dip 和设备的物理像素无关,一个 dip 在任意像素密的设备上都占据相同的空间。如果用户没有进行缩放,那么一个 CSS 像素就等于一个 dip。 当设置分辨率为 1920px1200px 的时候,理想视口的值是 1920px, 那么 dip 的值就是 1920px。

    21520

    CSS尺寸单位介绍

    在早先的移动设备中,像素密都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个物理像素的。 ,缩放的是css像素,而非分辨率,分辨率是的分辨率,不论你怎么缩放当前页面,分辨率都不会改变我们知道在移动端可以在一定程上控制用户的缩放行为,也可以禁止用户缩放 content属性值 :width ,每个设备的dpr也不同,换句话说就是不同设备每一行的物理像素数不同,能显示的css的px数也不同,如果我们写一个div,是375px,375px在这个(iPhone6)上是刚刚满,因为这个刚刚是 375px( 设备独立像素),当我们换另一个是414px的设备(iPhone6Plus)时,这个375px的div就无法铺满这个,同样的当换一个iPhone5(320px),又会出现滚动条, ,问题就会得到解决我们写页面都是根据UI设计稿来做的,我们假设UI设计稿的是750px(750px是常规,当然也可以是640px或是其他,但是整个项目,必须统一),唯一不变就是就

    31130

    CSS尺寸单位介绍

    在早先的移动设备中,像素密都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个物理像素的。 ,缩放的是css像素,而非分辨率,分辨率是的分辨率,不论你怎么缩放当前页面,分辨率都不会改变我们知道在移动端可以在一定程上控制用户的缩放行为,也可以禁止用户缩放 content属性值 :width ,每个设备的dpr也不同,换句话说就是不同设备每一行的物理像素数不同,能显示的css的px数也不同,如果我们写一个div,是375px,375px在这个(iPhone6)上是刚刚满,因为这个刚刚是 375px( 设备独立像素),当我们换另一个是414px的设备(iPhone6Plus)时,这个375px的div就无法铺满这个,同样的当换一个iPhone5(320px),又会出现滚动条, ,问题就会得到解决我们写页面都是根据UI设计稿来做的,我们假设UI设计稿的是750px(750px是常规,当然也可以是640px或是其他,但是整个项目,必须统一),唯一不变就是就

    29620

    自适应丨Html5响应式(自适应)网页设计

    V站今天分享下如何玩烂自适应第一步:在网页代码的头部,加入一行viewport元标签 view plain copy viewport是网页默认的和高,上面这行代码的意思是:网页默认等于 (width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占面积的100%。 自动探测,然后加载相应的CSS文件 view plain copy 上面的代码意思是,如果小于600像素(max-device-width: 600px),就加载css600.css文件 如果在600像素到980像素之间,则加载css600-980.css文件 view plain copy 另有(不建议使用):除了用html标签加载CSS文件,还可以在现有CSS文件中加载 view document.getElementById(content).getElementsByTagName(img);    imgSizer.collate(imgs);  });注:如有条件的话,最好还是根据不同大小的

    1.6K50

    移动前端开发之viewport的深入理解

    在早先的移动设备中,像素密都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个物理像素的。 所有的iphone的ideal viewport都是320px,无论它的是320还是640,也就是说,在iphone中,css中的320px就代表iphone。?? ,只要在css中把某一元素的设为ideal viewport的(单位用px),那么这个元素的就是设备了,也就是为100%的效果。 viewport的就是)的目的。??? 这里的所用的单位px都是指css中的px,它跟代表实际物理像素的px不是一回事。

    58650

    第119天:移动端:CSS像素、像素和视口的关系

    2、visual viewport(视觉视口)和物理像素visual viewport(视觉视口)物理的可视区域,显示器的物理像素,同样尺寸的,像素密大的设备,硬件像素会更多。 设备的逻辑像素和物理像素(像素分辨率)的关系满足如下公式:逻辑像素*倍率 = 物理像素而移动端手机通常不可以设置分辨率,一般都是设备厂家默认设置的固定值,换句话说 dip 的值就是 视网膜): ppi 大于320设备尺寸列表 https:material.iodevices四、视口与缩放布局:布局视口的逻辑像素的数量的逻辑像素的数量(视觉视口、可见视口、虚拟视口 以缩小为例  1、viewport的逻辑和视觉初始都为width,逻辑不变,视觉以initial-scale缩小;视觉缩小到跟一样时,不再缩小,变成逻辑变大,视觉不变。 4、无法缩小到文字不能再缩小的程总结:viewport视觉缩小到之前,viewport、百分比元素、固定元素,都是逻辑不变,视觉以同等比例缩小。

    42950

    JavaScript、Jquery获取和高

    在日常的项目中经常需要获取或者高,简单记录一下:Javascript方法获取:document.body.clientWidth 网页可见区域document.body.clientHeight window.screenTop 网页正文部分上window.screenLeft 网页正文部分左window.screen.height 分辨率的高window.screen.width 分辨率的 window.screen.availHeight 可用工作区高window.screen.availWidth 可用工作区JQuery方法获取:($(window).height()); ).width());浏览器当前窗口文档对象($(document.body).width());浏览器当前窗口文档body的($(document.body).outerWidth(true) );浏览器当前窗口文档body的总 包括border padding margin

    28200

    两个 viewports 的故事-第二部分

    手机远小于桌面,最大也就 400px 甚至更小(有些手机据称有更大的,那是骗人的,或者至少给我们的是无用的信息)。 CSS 的布局是根据布局视图计算的,所以比视觉视图更。 由于  元素首先获取布局视图的尺寸,所以 CSS 被编译后页面就会比手机。这使得你的网站和在桌面浏览器中显示的一样。 布局视图有多呢? 缩放 很明显,两种视图都是用 CSS 像素测算。当视觉视图通过缩放改变时(如果是放大,上的 CSS 像素会变少),布局视图的尺寸不会变。 和在桌面上一样, screen.widthheight 能够得到的尺寸(设备像素)。作为开发者你可能不需要这些信息。你对的物理尺寸不感兴趣,而只关心当前上有多少 CSS 像素。? 它们会被拉伸到布局视图的 100% 。大多数浏览器会通过缩小来在上显示整个布局视图,如下图的效果?所有的用户会立即放大查看,但是大多数浏览器会保持元素的不变,这使得文本很难阅读。?

    34470

    HTML5中判断横

    首先在head中加入如下代码: 针对上述viewport标签有如下说明 1)、content中的width指的是虚拟窗口的。2)、user-scalable=no就一定可以保证页面不可以缩放吗? 4)、手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面等于是页面正好适应才可以保证页面不能移动。 5)、如果页面是经过缩小适应的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。 一:CSS判断横写在同一个CSS中@media screen and (orientation: portrait) { *竖 css*} @media screen and (orientation : landscape) { *横 css* } 分开写在2个CSS中 竖@media screen and (orientation: portrait) { *竖 css* } @media

    1.5K40

    相关产品

    • 云直播

      云直播

      云直播(CSS)为您提供极速、稳定、专业的直播云端处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、慢直播、快直播三种服务,分别针对大规模实时观看、高并发推流录制、超低延时直播场景,配合移动直播 SDK,为您提供一站式的音视频直播解决方案。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券