首页 > TAG信息列表 > viewport

ExtJS - ExtJS最佳实践

更新记录 转载请注明出处:https://www.cnblogs.com/cqpanda/p/16583543.html 2022年8月14日发布。 2022年8月13日 从笔记迁移到博客。 ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html 不要手动为组件设置Id配置项 在大型项目中，手动设置组件id配置项容易导致id重

Day16 CSS-自适应布局

媒体查询 使用 @media 规则制定一组样式的目标媒体类型（逗号分隔），以花括号确定范围。 视口：指一个设备能够显示的屏幕区域 在 head 标签中，输入 viewport 定义原标签（meta name="viewport"） 视口单位： vw：1vw等于视口宽度的1% vh：1vh等于视口高度的1% vmin：选取vm和vh中最小的那个

移动端页面布局

　　一、移动适配 　　　　移动端调试：   　　二、视口　(viewport)　　 　　　　2.1 布局视口　　layout viewport 　　早期使用，一般设置为980px 　　　　2.2视觉视口　　visual viewport　　用户正在看到的网站的区域 　　　　2.3理想视口　　ideal viewport　　需要手动添加me

viewport配置

viewport用来设置用户在手机上的可视区域。 width=device-width：指定viewport宽度为设备宽度，inital-scele=1.0：指定默认缩放比例为1:1。 通过maximum-scale和minimum-scale限定屏幕缩放比例为1:1，通过user-scalable限制用户对屏幕进行缩放。 <mate name='viewport' content='width=

Ray Tracing in One Weekend Part2

#include <iostream> #include<fstream> #include<string> #include "v3d.h" #include "ray.h" #include "color.h" using namespace std; // Type aliases for vec3 using point3 = vec3; // 3D point using color = vec3

vue2 -- 移动端自适应（postcss-px-to-viewport）

1、安装依赖 npm install postcss-px-to-viewport --save 2、修改文件.postcssrc.js module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {},//用来处理元素容器宽高比 "

同志们，该放弃移动端rem适配方案了

1.背景 在做移动端各种尺寸屏幕的适配时，用的最多的就是rem方案。我们都写过这样的代码,来设置根字体大小。这个计算公式中设备宽度，UI设计稿尺寸这两个参数比较好理解，可是为什么要除以100呢，为什么不是10,50或者其它的数值呢。 const setRem = () => { const deviceWidth = do

视口 viewport

视口（viewport）就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口  布局视口 （layout viewport） 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早起的PC端页面在手机上显示的问题 IOS，Android基本都将这个视口分辨率设置为980px，所以PC上的网页大

meta标签中viewport有哪些设置

width 一般取 device-width height 一般不设置 initial-scale 初始缩放值 小数 一般为1 mininum-scale 最小缩放值 maxinum-scale 最大缩放值 user-scalable 可取值 yes | no 例子 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,

画一条 0.5px 的线

采用 meta viewport 的方式 <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/> 这样就就能缩放到原来的0.5倍，1px就会变成0.5px; 注意：viewport只针对移动端，在移动端上才能看到效果; 采用transform: scale() 的

WPF图片背景平铺

ImageBrush中的TileMode、Viewport属性可以实现平铺。 就是imageBrush从坐标（0,0）到（0.5,0.5）实现平铺4张图，因为坐标从（0，0）到（1,1）是全屏，所以到0.5是一半，就显示4张图片，如果Viewport设置成"0,0,0.1,0.1",那么横向纵向就显示10张图片平铺。 <Grid.Background> <ImageBrus

Android图表HelloCharts的简单实例

概述 效果图，数据可平移查看历史 build.gradle implementation 'com.github.lecho:hellocharts-library:1.5.8@aar' layout 直接在布局中加入相应的图表控件 <lecho.lib.hellocharts.view.LineChartView android:id="@+id/ChartLine" android:layout_width="0dp"

vue pc 端和移动端响应式布局

vue pc 端和移动端响应式布局 源码: https://gitee.com/hellojinjin/vue-flexible-layout.git 技术栈： postcss-px-to-viewport 媒体查询 flex 布局 ui 组件(element-ui tabs 组件) 安装 postcss-px-to-viewport npm install postcss-px-to-viewport 根目录新建 postcss.config.

二、视口 布局视口 视觉视口 理想视口

2视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。 2.1 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 IOS,Android基本都是将这个视口分

视口-viewport

@目录1. 视口简介2. 布局视口 layout viewport3. 视觉视口 visual viewport4. 理想视口 ideal viewport5. meta视口标签的使用 1. 视口简介 视口(viewport) 就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口 2. 布局视口 layout viewport 一般移

css自适应 vh

vh（Viewport Height）是前端开发中的一个动态单位，是一个相对于网页视口（Viewport）的单位。（与vh一起的还有vw（Viewport Width）） 在桌面端，视口指的是浏览器的可视区域即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。系统会将视口的高

响应式介绍

响应式设计（以下称 RWD ）是一种设计思维方式，而不是某种特定的技术。我理解的响应式设计，就是让 Web 内容的呈 现到手机和平板上并且都保持最佳使用体验。现在刚接触 RWD ，感觉它关注的都是移动端，但实际上大屏幕以及高分屏也 属于 RWD 需要在设计或技术层面考量的要素。   meta viewp

pdfJS的使用

pdfJS的使用 版本是 "pdfjs-dist": "2.5.207",npm i pdfjs-dist 版本是 “pdfjs-dist”: “2.5.207”, npm i pdfjs-dist <template> <div class="details"> <div class="home_wrap"> <div class="pdf_d

pdf pc端、h5在线预览问题 pdfjs-dist

1.插件file-viewer--支持pdf,word,xsl..etc（支持pc，H5中不支持，本身利用的是iframe) 2.iframe <iframe style={{width: '100%', height: '100%'}} title={filename} src={path} frameborder="0"></iframe> 3.ios本身支持pdf预览，安卓需要转换为canvas进行语言-- 插件pd

移动端布局之postcss-px-to-viewport（兼容vant）

vue 插件：postcss-px-to-viewport （布局换算插件）    postcss.config.js   module.exports = { plugins: { // ... 'postcss-px-to-viewport': { unitToConvert: 'px', viewportWidth: 750, unitPrecision: 5,

postcss.config.js 配置(vue移动端自适应)

  安装依赖  npm install postcss-write-svg  postcss-px-to-viewport-multichange --D  直接在根目录下创建postcss.config.js module.exports = {   plugins: {     // autoprefixer: {},  // cssnext中启用     // 'postcss-import': {},     // 'postcss-url'

根据设计稿尺寸，样式自适应各个分辨率（vue）插件：postcss-px-to-viewport

插件：postcss-px-to-viewporthttps://www.npmjs.com/package/postcss-px-to-viewport 简介 将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件. 如果你的样式需要做根据视口大小来调整宽度，这个脚本可以将你CSS中的px单位转化为vw，1vw等于1/100视口宽度。 PC、移动

移动端的理解(2)

一.屏幕尺寸 平时我们通常提到手机的尺寸，比如iPhone6是4.7英寸的。手机的屏幕是以英寸为单位的。我们平时使用最多的单位是：毫米、厘米、米。1英寸（inch）=2.54厘米（cm）。 英寸到底表示 的是什么呢？是手机的宽还高？ 原来英寸代表的意思是：手机屏幕对角线的长度。 常见的屏幕尺寸有：2.4

meta name="viewport" content="width=device-width,initial-scale=1.0" 在html中所代表的含义

 meta name="viewport" content="width=device-width,initial-scale=1.0" 解释 <meta name="viewport" content="width=device-width,initial-scale=1.0">   content属性值 :      width:可视区域的宽度，值可为数字或关键词device-width      height

移动端vue项目pdfjs使用

此案例使用的是vue2的@vue/composition-api，大部分代码来自 https://juejin.cn/post/6909252620741787656 此案例根据用户的屏幕宽度自适应为宽度100% vue和pdfjs版本  "vue": "^2.6.12", "pdfjs-dist": "^2.7.570", html <div class='pdf-wrap'