网站建设运城,怎么做贝店式的网站,网站如何快速备案,华为的网站建设设备像素比
设备像素比 (DevicePixelRatio) 指的是设备物理像素和逻辑像素的比例 。比如 iPhone6 的 DPR 是2。
设备像素比 物理像素 / 逻辑像素。可通过 window.devicePixelRatio 获取#xff0c;CSS 媒体查询代码如下
media (-webkit-min-device-pixel-ratio: 3), (min-…
设备像素比
设备像素比 (DevicePixelRatio) 指的是设备物理像素和逻辑像素的比例 。比如 iPhone6 的 DPR 是2。
设备像素比 物理像素 / 逻辑像素。可通过 window.devicePixelRatio 获取CSS 媒体查询代码如下
media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {...
}
复制代码布局视口、视觉视口、理想视口
布局视窗Layout Viewport
一般移动设备的浏览器都默认设置了一个布局视口并且该视口最常见的分辨率为 980px。
由于 980px 的宽度大于大部分手机屏幕的宽度为了将页面显示完全只能对原来的页面进行缩放如果不进行缩放那么就需要左右拖动来浏览。大部分浏览器默认采用缩放方式
视觉视窗Visual Viewport
它指的是浏览器的可视区域也就是我们在移动端设备上能够看到的区域。默认与当前浏览器窗口大小相等当用户对浏览器进行缩放时不会改变布局视口的大小但会改变视觉窗口的大小。 理想视口Ideal Viewport 理想中的视口。这个概念最早由苹果提出其他浏览器厂商陆续跟进目的是解决在布局视窗下页面元素过小的问题显示在理想视口中的页面具有最理想的宽度用户无需进行缩放。所以理想视窗就相当于把布局视窗修改成一个理想的大小这个大小和物理视窗基本相等。
Viewport Meta
我们可以使用 viewport meta 标签来进行布局视窗的设置常见的配置如下
metanameviewportcontentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno /复制代码viewport meta 各个属性介绍 width设置 layout viewport 的宽度 initial-scale设置页面与 layout viewport 之间的初始放大系数 minimum-scale设置最小放大系数用户可以虽小的最小程度 maxmum-sacle最大放大系数用户可以放大的最大程度比如 300% height设置 layout viewport 的高度。应该设置布局视图的高度。它在任何地方都不受支持。一般不会规定高度 user-scalable设置为 no意味着阻止用户进行缩放操作。最好不要使用。
自适应方案 响应式布局
使用媒体查询百分比布局flex 布局等方式来让页面自适应Bootstrap 就是使用响应式布局完成适配移动端的。 如上图可以看到Bootstrap 使用了 media 来控制不同视窗下的展示。
mediaonly screen and (min-width: 375px) {.logo { width : 62.5px; }
}mediaonly screen and (min-width: 360px) {.logo { width : 60px; }
}mediaonly screen and (min-width: 320px) {.logo { width : 53.3333px; }
}
复制代码rem 方案
remfont size of the root element是 CSS3 新增的一个相对单位是指相对于根元素的字体大小的单位。这个方案阿里有个对应的库 lib-flexible我们将介绍个他的原理和最终效果。
因为 rem 是相对于根元素字大小的单位我们在编写标准尺寸的 h5 页面时可以使用 rem 作为单位最后根据设备大小动态设置根元素大小这样即可实现自适应。
举个例子 比如设计稿是 750 * 1334 尺寸的根元素设定一个基础大小 100px页面完成后如果是展示在 828 * 1562 机型上计算出对应的根元素大小为 110.4 px。此时页面内使用 rem 单元的元素对应的 px 也会按比例增大就实现了自适应。 接下来我们要按照设计稿写各个布局宽高大小只需要把 px 转换成 rem比如 50px 就对应 0.5rem根元素为100px。这边可以使用 postcss-pxtorem 插件或者 less 定义函数都可以。 来看下 lib-flexible 经典版本核心部分
var doc window.document;
var docEl doc.documentElement;
functionrefreshRem(){var width docEl.getBoundingClientRect().width; // 获取html宽度// ...var rem width / 10; // 这边 10 的计算750 ÷ 75 10也就是基础大小是 75px上边例子中是 100pxdocEl.style.fontSize rem px;flexible.rem win.rem rem;
}// 页面出现或者大小变化时重新设置
win.addEventListener(resize, function() {clearTimeout(tid);tid setTimeout(refreshRem, 300);
}, false);
win.addEventListener(pageshow, function(e) {if (e.persisted) {clearTimeout(tid);tid setTimeout(refreshRem, 300);}
}, false);
复制代码还有一部分是根据 window.devicePixelRatio 设置 meta 的 scale注意2.0版本不会设置比如在 iphone6 下 scale 会设置成 0.5此时 1px 的效果如下 iphone6 下 scale 为 1 时1px 的效果如下 可以看到 scale 为 0.5 的情况下线更细。
如果设置 scale 保持都为 1根据上边自适应方案编写的 1px 代码最终在 iphone6 中渲染的是 0.5px但是部分设备版本不支持 0.5px可能会解释成 0这时就要单独处理 1px 问题。
小结目前个人项目中使用较多的是只动态设置根元素大小meta 设置为 1px 的问题看情况单独处理。
vw、vh 方案
lib-flexible 官方已经不推荐使用 rem 方案了推荐使用 vw、vh 方案。 由于viewport单位得到众多浏览器的兼容lib-flexible这个过渡方案已经可以放弃使用不管是现在的版本还是以前的版本都存有一定的问题。建议大家开始使用viewport来替代此方。 vw、vh、vmin、vmax 是一种视窗单位也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗Viewport大小来决定的单位 1代表类似于 1%。 vw视窗宽度的百分比1vw 代表视窗的宽度为 1% vh视窗高度的百分比 vmin当前 vw 和 vh 中较小的一个值 vmax当前 vw 和 vh 中较大的一个值
举个例子看下 vw、vh 方案是怎么实现自适应的
1、设计稿是 750 * 1334 尺寸的页面布局宽高大小都按设计稿写到时类似使用 less 或者 postcss-px-to-viewport 插件转换成 vw。比如一个元素宽度为 75px 到时会自动转换成 10vw在页面尺寸为 828 * 1562 下这个元素对应的宽度为 82.8px实现了自适应。
可以看到对比 rem 方案这边省去了设置根元素大小更加简洁。
postcss-px-to-viewport 插件的一些配置
module.exports {plugins: {postcss-px-to-viewport: {unitToConvert: px, // 要转化的单位 viewportWidth: 750, // UI设计稿的宽度 unitPrecision: 6, // 转换后的精度即小数点位数 propList: [*], // 指定转换的css属性的单位*代表全部css属性的单位都进行转换 viewportUnit: vw, // 指定需要转换成的视窗单位默认vw fontViewportUnit: vw, // 指定字体需要转换成的视窗单位默认vw selectorBlackList: [wrap], // 指定不转换为视窗单位的类名 minPixelValue: 1, // 默认值1小于或等于1px则不进行转换 mediaQuery: true, // 是否在媒体查询的css代码中也进行转换默认false replace: true, // 是否转换后直接更换属性值 exclude: [/node_modules/], // 设置忽略文件用正则做目录名匹配 }}
}
复制代码vw、vh 的兼容性好基本所有的现代浏览器都支持。 专业技能
一般来说面试官会根据你的简历内容去提问但是技术基础还有需要自己去准备分类形成自己的知识体系的。简单列一下我自己遇到的一些题 HTMLCSS JavaScript 前端框架 前端性能优化 前端监控 模块化项目构建 代码管理 信息安全 网络协议 浏览器 算法与数据结构 团队管理
最近得空把之前遇到的面试题做了一个整理包括我本人自己去面试遇到的还有其他人员去面试遇到的还有网上刷到的我都统一的整理了一下希望对大家有用。
其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等
由于文章篇幅有限仅展示部分内容
