• 关于 屏幕自适应 的搜索结果

问题

关于移动端图片自适应问题。

a123456678 2019-12-01 20:19:58 993 浏览量 回答数 1

回答

题主的问题:“设置left:-250px,整个屏幕不会出现横向滚动条,整个屏幕是自适应的,要是设置right:-250px,整个屏幕就会出现滚动条,不再自适应了。这是为什么?”自适应是CSS的一种布局方式,不是指你说的“不可见”,有点不准确啊,O(∩_∩)O哈哈~默认情况下,浏览器进行页面布局基本过程是以浏览器可见区域为画布,左上角为(0,0)基础坐标,从左到右,从上到下从DOM的根节点开始画,题主描述的情况是有一部分内容超出了浏览器的可见区域,所以浏览器不绘制相应画面。可以设置html的方向html{direction:rtl;},这时候你就可以看到“设置left:-250px,整个屏幕会出现滚动条;设置right:-250px,整个屏幕不会出现滚动条”。参考:Web底层剖析,浏览器是如何工作的

杨冬芳 2019-12-02 02:53:28 0 浏览量 回答数 0

问题

图片宽度根据屏幕自适应100%,高度要一个固定值 700px

杨冬芳 2019-12-01 19:54:59 1220 浏览量 回答数 1

新用户福利专场,云服务器ECS低至102元/年

新用户专场,1核2G 102元/年起,2核4G 699.8元/年起

问题

2020年的网站制作——自适应还是手机站

横云断水 2019-12-01 21:29:41 8981 浏览量 回答数 3

回答

Autosizing是在做UI、屏幕适配的时候用的一种布局技术,在没有用AutoLayout之前用的很多。Autosizing分别有6个属性,你分别调整任何一个在旁边的Example就会很直观地显示结果。外面4个“工”分别代表了Top、Right、Left、Bottom对齐,中间两个一横一竖箭头分别代表长度自适应充满和宽度自适应充满。

a123456678 2019-12-02 03:13:15 0 浏览量 回答数 0

回答

既然是网页设计,那图片的分辨率肯定是要满足电脑屏幕的要求。用ps设计好图片分辨率然后再用background-size:cover; 使图片自适应电脑屏幕大小如果图片只是背景颜色,可以用repeat-x 水平平铺。

小旋风柴进 2019-12-02 02:11:04 0 浏览量 回答数 0

问题

请问如何让屏幕高度能同时适应iPhone5和旧版本

爵霸 2019-12-01 19:31:14 949 浏览量 回答数 1

问题

如何实现自适应的多行文字垂直居中?

杨冬芳 2019-12-01 20:06:40 854 浏览量 回答数 1

问题

请问Xcode6 怎么利用storyboard实现不同设备下的屏幕适配

爵霸 2019-12-01 20:18:58 954 浏览量 回答数 1

问题

一个div内含三个div,内部三个div向左浮动,最后一个自适应大小

小旋风柴进 2019-12-01 20:19:49 1231 浏览量 回答数 1

回答

做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结一下,通常进行自适应高度和宽度,图片时,一般与页面的布局存在关系。 1、最小尺寸分辨率1024*768(传统17寸显示器),则可以采用940px、960px、或者常用的980px作为最小宽度 2、1024768之后稍大的分辨率就是1280768了,则可以采用1200px或者1220px作为稍大的网页宽度 3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签 4、不支持css3、html5的脑残浏览器特别是<=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了 5、宽度自适应需要对每个显示模块进行不同宽度的计算,在做html布局时需要大量的计算与适配。 6、宽度自适应为不同宽度显示器写布局元素时常用的css 下面我们看下,如何用js和css来自适应屏幕的大小。 一:了解高度和宽度的基础 下面用图片来说明: 网页可见区域高宽为:document.body.clientHeight||document.body.clientWidth 网页正文的区域高宽为:document.body.scrollHeight||document.body.scrollWidth(包括滚轮的长度) 网页被卷去的上左区域:document.body.scrollTop||document.body.scrollLeft 二: css自适应高度 1.两栏布局,左边固定,右边宽度自适应 方法一: //html部分 左边 正文 //css部分 *{margin:0;padding:0} #left{float:left;width:200px;background:red;} #bodyText{margin-left:200px;background:yellow; 方法二: //html部分 左边 正文 //css部分 #left{float:left;width:200px;background:red;margin-right:-100%;} #body{width:100%;float:left;} #bodyText{margin-left:200px;background:yellow;} 2.三栏布局,两边定宽,中间自适应宽度 方法一: <div id="left">左边</div>----注意和div的位置有关系 <div id="right">右边</div> <div id="center">中间</div> //css部分 #left{width:200px;background:red;float:left;} #center{width:auto;background:blue;} #right{width:200px;background:yellow;float:right;} 方法二: html部分: <div id="body"> <div id="center">中间</div> </div> <div id="left">左边</div> <div id="right">右边</div> css部分: #body{width:100%;float:left;} //设置浮动和width:100% #body #center{background:red;margin-left:200px;margin-right:300px;} //margin-left:100%的使用方法 #left{width:200px;background:yellow;margin-left:-100%;float:left} #right{width:300px;background:blue;margin-left:-300px;float:left} -----如果设置为margin-left:-100%,则会跑到body的左边。 -----如果设置为margin-left:-300px(即right的宽度),则会跑到body的右边 3.关于最小宽度和最大宽度 这里依然结合布局来看,如下面的代码:自适应宽度,从而改变布局。 //html部分 <div id='container'> <div class='one'></div> <div class='two'></div> <div class='three'></div> </div> //css部分 #container{width:100%;} .one{width:20%;background:red;} .one,.two,.three{float:left; height:100px;} .two{width:60%;background:yellow;} .three{width:20%;background:blue;} @media (max-width:800px){--如果浏览器小于800px .one{width:40%;} .two{width:60%} .three{width:100%} } @media (max-width:400px)--如果浏览器宽度小于400px { .one{width:100%} .two{width:100%} .three{width:100%} } 理解什么叫最小宽度和最大宽度,最小宽度指为元素设置的最小宽度,到达最小宽度后,缩放文本不会起到任何作用 最大宽度是所有元素所能达到的一个上限,不能再继续往上增加。 三: css处理自适应高度 //html部分代码 <div id="fit"></div> //css代码 html,body{margin:0;height:100%;} #fit{width:200px;background:yellow;height:100%;border:1px solid red;} --这里同时给html和body加样式,是为了兼容各大浏览器。 IE 处于混杂模式时,body以窗口为高度参照,body设置为100%就可以使得页面和窗口一样高,body里面的嵌套div也可以扩展到窗口高度, 这样的话可以使布局适应浏览器窗口大小。窗体 》body》div (html ,body {overflow:scroll} 一层滚动条) 但是当处于标准模式时,body以html标签为高度参照,html标签才以窗口为参照,所以仅仅body 100%,并不能使它的子div100% 占据整个屏幕 还要使得 html 100%使得 html获得窗口大小才行。窗体》html》body》div (html ,body {overflow:scroll} 两层滚动条 ,html的滚动条从来不会用到) 父级随子级高度变化而自适应变化与子级随父级高度变化而变化 <div id="fj"> 我是父级 <div id="zj1">我是子级1</div> <div id="zj2">我是子级2</div> </div> //css部分 #fj{border:4px solid red;} #zj1{border:2px solid yellow;} #zj2{border:2px solid blue;}----这种情况下,父级高度随着子级div的高度自适应的改变 如果子div使用了float属性,此时已经脱离标准流,父div不会随内容的高度变化而变化,解决的办法是在浮动的div下面,加一个空div,设置clear属性both <div id="fj"> 我是父级 <div id="zj1">我是子级11111111111111111111111111</div> <div id="zj2">我是子级222222222222222222222222222222222222222222 222222222222222222222222222</div> <div id="clear" style="clear:both"></div>------如果去掉这句话,则父级div高度,不会随着子级的高度变化而变化 </div> //css部分 #fj{border:4px solid black;} #zj1{border:2px solid yellow;float:left} #zj2{border:2px solid blue;float:left} 高度的自适应的方法还有很多,这里不再列举。像height:auto等等。 四:js处理高度和宽度自适应问题 <div id="div1" >222222222222222222222</div> //js部分 function setHeight(obj) { var temHeight=null; //FF if(window.innerHeight) { temHeight=window.innerHeight;//包括页面高度和滚动条高度 } else { temHeight=document.body&&document.body.clientHeight; } if(temHeight>document.body.clientHeight)//页面高度 { oDiv.style.height=temHeight+"px"; } else { oDiv.style.height=document.body.clientHeight+"px"; } } window.onload=function() { var oDiv=document.getElementById("div1"); getHeight(oDiv); } 宽度自适应代码: function setWidth(obj) { var screenWidth = window.screen.width; var width; var imgURL ; if (screenWidth >= 1440) { width = "1400px"; imgURL = "1400.png";//设置不同分辨率下的图片 } else if (1024 < screenWidth && screenWidth < 1440) { width = "1200px"; imgURL = "1200.png"; } else { width = "980px"; imgURL = "980.png"; } obj.style.width=width ; obj.style.backgroundImage="url(" + imgURL + ")"; }) 五:移动端的自适应高度和宽度 移动端的相对要简单些,首先,在网页代码的头部,加入一行viewport标签。 <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> viewport是网页默认的宽度和高度,上面的意思表示,网页的宽度默认等于设备屏幕的宽度,原始缩放比例为1,即网页初始大小占屏幕面积的100%。 1:由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。具体说,CSS代码不能指定像素宽度:width:xxx px;只能指定百分比宽度:width: xx%;或者width:auto; 2:一般使用em,尽量少使用px字体 3:使用流动布局 4:自适应网页设计”的核心,就是CSS3引入的media query模块。下载地址: http://download.csdn.net/download/song_121292057/8031781 自动探测屏幕宽度,然后加载相应的CSS文件。 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="style.css" /> -------当屏幕小于400时,就加载style.css这个文件 5:除了用html标签加载CSS文件,还可以在现有CSS文件中加载。 @import url("style2.css") screen and (max-device-width: 800px);//当小于800px屏幕时,就加载style2.css文件 6:图片的自动缩放,比较简单。只要一行CSS代码:img{ max-width: 100%;}建议根据不同的屏幕分辨率,加载不同大小像素的图片。 移动端的自适应,大体上差不多就这么多,主要核心是利用mediaquery,根据不同的屏幕大小,实现不同的布局。代码可看上面的列子。这里不再重复写。

问问小秘 2020-05-12 18:08:22 0 浏览量 回答数 0

回答

table其实本身就有一定的自适应能力。首先你的table的宽度肯定应该要设为100%了吧,这能保证在手机上铺满屏幕而不超出。接着最好对每一列都按可能出现的字体长度设定好宽度比例,这样不至于有的字太多而挤成像图上的字那样,当然如果列数太多的话在小的屏幕上怎么都没法做到比较好的显示效果。

杨冬芳 2019-12-02 02:42:17 0 浏览量 回答数 0

问题

table标签内的td、th如何设置固定宽度,而不是自适应?

杨冬芳 2019-12-01 19:49:22 5745 浏览量 回答数 1

问题

怎么给网页加上自适应背景

a123456678 2019-12-01 19:28:41 739 浏览量 回答数 1

回答

String style = "";//添加样式使图片可以按屏幕大小自适应显示intro = style + intro; 换成下面的: into = ""+into;试试

a123456678 2019-12-02 02:13:53 0 浏览量 回答数 0

回答

在 /pages 目录中的 .acss 文件用于定义页面样式。 每个页面中的根元素为 page,需要设置页面高度或背景色时,可按如下方式: background-color: #fff; } ACSS 是一套样式语言,用于描述 AXML 的组件样式,决定 AXML 的组件的显 示效果。 为适应广大前端开发者,ACSS 和 CSS 规则完全一致,100% 可以用。同时为更 适合开发小程序,对 CSS 进行了扩充。 ACSS 支持 px,rpx,vh,vw 等单位。 rpx rpx(responsive pixel)可以根据屏幕宽度进行自适应,规定屏幕宽为 750rpx。以 Apple iPhone6 为例,屏幕宽度为 375px,共有 750 个物理像 素,则 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1 物理像素。 设备 rpx 换算 px(屏幕宽度 / 750) px 换算 rpx(750 / 屏幕 宽度) iPhone5 1rpx = 0.42px 1px = 2.34rpx iPhone6 1rpx = 0.5px 1px = 2rpx iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx 内容来源:https://developer.aliyun.com/article/756818?spm=a2c6h.12873581.0.dArticle756818.26162b70Su1GZy&groupCode=tech_library

KaFei 2020-04-27 14:01:42 0 浏览量 回答数 0

回答

这个一般都是设置一个max-width,然后进行100%缩放,假如他设置的max-width为480px,手机屏幕显示宽度<480px时,width会按照100%撑满并自适应。

a123456678 2019-12-02 02:23:11 0 浏览量 回答数 0

问题

如何让高度自适应所有屏幕?

a123456678 2019-12-01 19:29:29 743 浏览量 回答数 1

问题

ios 多个控件之间的大小适配

a123456678 2019-12-01 19:22:36 731 浏览量 回答数 1

回答

首先是抓取内容,然后自己去解析里面内容,最后就是吧内容显示到手机端就可以了,自适应手机屏幕大小这个是Android或者ios开发的事儿,和内容本身并没有关系,比如你第一个图片,在ios中就是一个tableview的控件,然后重写里面的cell来设置内容

爵霸 2019-12-02 02:06:22 0 浏览量 回答数 0

问题

bootstrap如何实现高度随屏幕大小动态变化

小旋风柴进 2019-12-01 20:22:24 2186 浏览量 回答数 1

问题

有高人知道云盘的APP布局框架吗?

杨冬芳 2019-12-01 20:14:18 978 浏览量 回答数 1

问题

遇到了一个神级适配的项目

爵霸 2019-12-01 20:14:42 741 浏览量 回答数 1

问题

关于浮动窗口怎么打包成jar

蛮大人123 2019-12-01 20:14:59 1169 浏览量 回答数 1

问题

关于ontouchlistener的监听问题

爵霸 2019-12-01 20:16:59 950 浏览量 回答数 1

问题

遇到了一个神级适配的项目

杨冬芳 2019-12-01 20:12:05 688 浏览量 回答数 1

问题

html高度自适应

杨冬芳 2019-12-01 19:45:58 1654 浏览量 回答数 1

回答

1 移动设备终端屏幕不固定,所以不能直接设定宽度或者高度。像素设置使用em单位,宽度高度设置使用百分比等。屏幕自适应还要借助 viewport属性 如: 2 初步定为你的移动网站是否在支持html5的浏览器中。现在的浏览器html5支持已经很普遍,但是还有部分老机型不支持。这个涉及到是否单独加载移动端js,包括mobile.js .,进而又涉及到用户交互体验,肯定是使用html5和css3 js的网站用户体验更高。前提是用户移动端网络环境能足够支持这种页面容量。 3 观察大的电商网站,为了满足不同用户需求,手机网站一般分为3个版本 简版,触屏版,电脑版。触屏版大多启用html5开发。简版就是之前的wap升级,最不耗费流量的一种。

a123456678 2019-12-02 02:20:39 0 浏览量 回答数 0

问题

Ipad如何在使用阿里云邮的时候怎么旋转屏幕?

20464625 2019-12-01 18:57:27 73 浏览量 回答数 2

问题

html5自适应手机屏幕问题

小旋风柴进 2019-12-01 19:46:57 1034 浏览量 回答数 1
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 SQL审核 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站 人工智能 阿里云云栖号 云栖号案例 云栖号直播