自适应

透明和宽高自适应 1.透明属性 IE浏览器写法：filter：alpha（opacity=value）；取值范围0-100 兼容其他写法：opacity=value；取值范围0-1 2.视频文件的引入 ( 1 ) swf文件引入 <object width= "value" height= "value" > <param name= "movie" value= "flash路径及全称" />或 <embed src= "flash路径及全称" wmode= "transparent" ></embed> </object> ( 2 ) 内联框架（HTML格式的引入） <iframe src= "" scrolling= "no" frameborder= "0" ></iframe> src URL 规定在iframe中是否显示的文档的URL scrolling yes/no 规定是否在iframe中显示的滚动条 frameborder 0/1 规定是否显示框架的边框 ( 3 ) 滚动字幕 <marquee behavior= "scroll(滚动)/alternate(晃动)" direction= "up(从下向上)/left(从右向左)/down(从上向下)/right(从左向右)" scrollmount ( 滚动速度 ) = "value" height=

版心和布局流程 阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 1 布局流程 为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下： 1、确定页面的版心（可视区）。 2、分析页面中的行模块，以及每个行模块中的列模块。 3、制作HTML结构 。 4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。 2 一列固定宽度且居中 最普通的，最为常用的结构 3 两列左窄右宽型 比如小米 小米官网 4 通栏平均分布型 比如锤子 锤子官网 经典的布局 1 行布局 1）基础的行布局 蓝色区域宽度是固定的大小。 2）行布局自适应 以百分比的形式来定义蓝色部分宽度。它的宽度就会随着浏览器窗口的宽度变化而变化。 3）行布局自适应限制最大宽 添加max-width属性，限制最大宽度，当宽度变得小于max-width时，宽度显示以设置值为准，当宽度变得超过max-width时，宽度显示为max-width。 4）行布局垂直水平居中 5）多行布局固定宽 6）多行布局某部位自适应

一、代码如下 QImage *img_mainicon;//主图标显示在右上角lable中 img_mainicon =new QImage;//新建一个image对象 img_mainicon->load(":/image/images/haiyan.jpg"); //载入图片到img对象中 img_mainicon->scaled(ui->label_mainicon->size(),Qt::KeepAspectRatio);//把图片 ui->label_mainicon->setScaledContents(true); ui->label_mainicon->setPixmap(QPixmap::fromImage(*img_mainicon)); //将图片放入label，使用setPixmap,注意指针*img //ui->label_mainicon->setAlignment(Qt::AlignCenter); //将图片放在label中心，用缩放了就不需要了 二、详解 其中第一，第二，第三行代码可以整合成一行 QPixmap *pixmap = new QPixmap(":/images/welcome_tlauto.png"); 其中路径可以由资源文件得到 第四条语句：设置图片缩放到label尺寸 这个是帮助中函数解释 Q Image QImage:

最近使用layer预览图片的时候遇到了一个问题，假如图片大小大于浏览器大小，则导致图片无法自适应屏幕。后来看到一篇博文： layer图片自适应窗口 原文链接：https://blog.csdn.net/qazx123q/article/details/82256930 //html结构 <a href="javascript:;" onClick="showImg(this)" data-href="{$vo.src}" ><img src="{$vo.src}" class="img-responsive" ></a> function showImg(obj){ var url = $(obj).data('href'); var thisimg = $(obj).siblings().find('img') var img = "<img src='" + url + "' />"; var setting = { type: 1, title: false, closeBtn: 0, skin: 'layui-layer-nobg', //没有背景色 shadeClose: true, shade: 0.6, //遮罩透明度 content: img } var windowH = $(window).height(); var windowW = $(window)

一、第一种方式是比较简单的，开发速度也比较快。主要利用-webkit-transform:scale()这个属性，比较设计稿和当前屏幕的宽度，或者高度，亦或者取两者的最小值，来进行自适应。 1. 如果宽度自适应，如果兼容iphoneX的话，此时的设计稿的背景图需要延长至1448，内容放在1206内，然后可以把背景图设在一个宽高100%的容器内，background-size:100% auto，需要进行宽度自适应的内容统一放在一个容器内，居中，然后用js统一缩放这个容器，已达到自适应的效果； 2. 如果高度自适应，兼容iphoneX的设计稿需要调整成1218*936，内容放在629中间，进行高度自适应缩放。 3.还有一种就是取两者的最小的那个来自适应。原理同上。 二、 比较简单的页面适配 比如顶部与底部的bar不管分辨率变化，高度和位置不变，中间的内容不管分辨率怎么变，都会位于左右两边等这种简单的布局的开发原则是： 1、文字流式（使用文字随着窗口变化自动换行） 2、控件弹性（flex布局） 3、图片等比缩放等。 三、 网易的做法 动态计算html根元素的font-size，进而通过rem进行适配。 如果设计稿横向分辨率是640px,为了计算方便，取100px的font-size为参照，那么body元素的宽度可以设置为6.4rem，于是html的font-size

方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用 rem 1. 简单问题简单解决 我觉得有些 web app并一定很复杂，比如拉勾网，你看看它的页面在iphone4,iphone6,ipad下的样子就知道了： 它的页面有一个特点，就是： 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边 这种app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述： 这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。另外对于拉勾这种app可能需要额外媒介查询对布局进行调整的就是小屏幕设备。举例来说，因为现在很多设计稿是根据iphone6的尺寸来的，而iphon6设备宽的逻辑的像素是375px，而iphone4的逻辑像素是320个像素，所以如果你根据设计稿做出来的东西，在iphone4里面可能显示不下，比如说拉钩网底部那个下载框，你对比看下就知道了，这是4： 这是6： · 6下面两边的间距比4多很多，说明拉勾对4肯定是做过适配的，从 代码 也可以证实这一点：

(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth > 640){ clientWidth = 640; } docEl.style.fontSize = 20 * (clientWidth / 640) + 'px'; if(window.orientation){ if(window.orientation == 90 || window.orientation == -90){ docEl.style.fontSize = 12 * (clientWidth / 640) + 'px'; } } }; recalc(); if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded',

在百度文库上看到的一篇关于移动页面自适应手机屏幕宽度的，觉得挺好的，收藏一下。 1、 使用meta标签 ，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 首先解释该标签的含义： <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 如果你完全不了解这个标签的使用需要先百度一下。 解释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选：虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等？经试验这个指的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准， 正确的做法是用js动态生成此标签 ，当然，应该先获取屏幕尺寸。 对于此标签还有以下需要分享： 1)、user-scalable

1、 使用meta标签 ，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 首先解释该标签的含义： <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 如果你完全不了解这个标签的使用需要先百度一下。 解 释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选：虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等？经试验这个指 的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准， 正确的做法是用js动态生成此标签 ，当然，应该先获取屏幕尺寸。 对于此标签还有以下需要分享： 1)、user-scalable=no就一定可以保证页面不可以缩放吗？NO，有些浏览器不吃这一套

网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文章讲述模糊的地方。 1、 使用meta标签 ，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 首先解释该标签的含义： <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 如果你完全不了解这个标签的使用需要先百度一下。 解 释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选：虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等？经试验这个指 的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准， 正确的做法是用js动态生成此标签 ，当然，应该先获取屏幕尺寸。 对于此标签还有以下需要分享： 1)、user