haoningabc
- 浏览: 1482240 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (691)
- linux (207)
- shell (33)
- java (42)
- 其他 (22)
- javascript (33)
- cloud (16)
- python (33)
- c (48)
- sql (12)
- 工具 (6)
- 缓存 (16)
- ubuntu (7)
- perl (3)
- lua (2)
- 超级有用 (2)
- 服务器 (2)
- mac (22)
- nginx (34)
- php (2)
- 内核 (2)
- gdb (13)
- ICTCLAS (2)
- mac android (0)
- unix (1)
- android (1)
- vim (1)
- epoll (1)
- ios (21)
- mysql (3)
- systemtap (1)
- 算法 (2)
- 汇编 (2)
- arm (3)
- 我的数据结构 (8)
- websocket (12)
- hadoop (5)
- thrift (2)
- hbase (1)
- graphviz (1)
- redis (1)
- raspberry (2)
- qemu (31)
- opencv (4)
- socket (1)
- opengl (1)
- ibeacons (1)
- emacs (6)
- openstack (24)
- docker (1)
- webrtc (11)
- angularjs (2)
- neutron (23)
- jslinux (18)
- 网络 (13)
- tap (9)
- tensorflow (8)
- nlu (4)
- asm.js (5)
- sip (3)
- xl2tp (5)
- conda (1)
- emscripten (6)
- ffmpeg (10)
- srt (1)
- wasm (5)
- bert (3)
- kaldi (4)
- 知识图谱 (1)
最新评论
-
wahahachuang8：
我喜欢代码简洁易读，服务稳定的推送服务，前段时间研究了一下go ...
websocket的helloworld -
q114687576：
http://www.blue-zero.com/WebSoc ...
websocket的helloworld -
zhaoyanzimm：
感谢您的分享，给我提供了很大的帮助，在使用过程中发现了一个问题 ...
nginx的helloworld模块的helloworld -
haoningabc：
leebyte 写道太NB了，期待早日用上Killinux！么 ...
qemu+emacs+gdb调试内核 -
leebyte：
太NB了，期待早日用上Killinux！
qemu+emacs+gdb调试内核
参考
http://jingyan.baidu.com/article/e73e26c0b3d36b24acb6a762.html
关键是
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
http://jingyan.baidu.com/article/e73e26c0b3d36b24acb6a762.html
关键是
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
</head>
<style type="text/css">
html{font-size:100px;}
body{font-size:0.14rem/*实际相当于14px*/}
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
html{font-size:117.1875px;}
}
/*iphone6plus*/
@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){
html{font-size:129.375px;}
}
</style>
<script type="text/javascript">
(function(doc,win){
var docEl=doc.documentElement,
resizeEvt="onorientationchange" in window ? "orientationchange" : "resize",
recalc=function(){
console.log(resizeEvt);
var clientWidth=docEl.clientWidth;
if(!clientWidth)return;
docEl.style.fontSize=100*(clientWidth/320)+'px';
};
//AbortifbrowserdoesnotsupportaddEventListener
if(!doc.addEventListener)return;
win.addEventListener(resizeEvt,recalc,false);
doc.addEventListener('DOMContentLoaded',recalc,false);
})(document,window);
</script>
<body>
hello
</body>
</html>
分享到：
发表评论
-
indexedDB存图片减少请求
2020-05-21 19:23 560getImageFile()获取网络图片 showImage ... -
vizceral-example的例子
2020-03-19 18:53 359自定义图和加载结构 代码在 https://github.c ... -
jsonpath的helloworld
2020-03-17 14:58 415基本语法：https://www.cnblogs.com/jp ... -
流动图神器vizceral
2019-10-12 19:04 519把c的代码生成json：https://github.com/ ... -
emscripten asm.js的helloworld
2018-03-01 20:15 1117mac下安装： brew install SDL2 SDL2_ ... -
websocket上传文件
2016-12-15 13:30 4492nginx的上传 查看http://haoningabc.it ... -
webpack的helloworld
2016-11-02 10:42 914参考 http://www.jianshu.com/p/42e ... -
javascript自定义事件
2016-06-01 21:49 556一言不合上代码 <input value=" ... -
html5的fiesystem api 浏览器本地存储
2016-06-01 15:59 924html5的fiesystem api可以存取本地文件 一言不 ... -
websocket传传图片
2015-12-25 17:51 7248参考[url]http://www.adobe.com/dev ... -
angularjs使用include后双向绑定失败的解决
2015-12-20 19:41 1871原理参考 http://segmentfault.com/q/ ... -
html5 陀螺仪
2014-11-26 21:05 5882<html> <head> ... -
webgl的贝塞尔曲线
2014-11-12 00:56 2540BezierCurve webgl的贝塞尔曲线 webgl ... -
chrome app的helloworld
2014-11-11 13:56 721参考 http://blog.csdn.net/rydiy/a ... -
shader and Program编程基本概念 - 转
2014-11-04 11:50 1544原地址:http://blog.csdn.net/myarro ... -
javascript对象转json
2014-10-17 14:09 1013<html> <head>& ... -
jquery 的svg中国地图
2012-12-16 14:37 28101三种吧 1.d3.js很强大 2.jquery的 jvecto ... -
纯css的树型结构
2012-10-03 18:29 1285<html><head> ... -
D3 的3d图
2012-09-16 17:05 1462LCF http://mathworld.wolfram. ... -
jquery table拖拽排序
2012-07-14 21:45 7127参考http://dragsort.codeplex.com/ ...
相关推荐
总结来说，rem移动端页面满屏H5自适应方案是一种基于CSS3 rem单位的响应式布局技术，通过设置根元素的字体大小和使用rem单位，能够实现跨设备、跨分辨率的页面自适应。这个方案在实际开发中具有广泛的应用，特别是在...
* 例如，iPhone 6 的视口大小是 375，iPhone 6 Plus 的视口大小是 414。 移动端适配方案是解决移动端屏幕尺寸和像素密度的差异对网页显示的影响的技术方案，通过了解像素视口概念、视口、像素问题、完美视口和 vw ...
【标题与描述解析】 标题“H96_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip”...在移动端，自适应布局确保用户无论是在iPhone、Android设备还是桌面浏览器上，都能获得一致且流畅的浏览体验。
该压缩包文件“黑色大气的iphone app企业官网模板下载2621_html网站模板_网页源码移动端前端_H5模板_自适应响应式源.zip”包含了一套适用于iPhone App企业官网的高端、大气的HTML网站模板。这个模板设计独特，采用...
这个"43_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip"压缩包文件包含了用于构建跨平台、多设备兼容的网站的源代码，特别是针对手机和平板等移动设备优化的设计。以下将详细介绍其中涉及的关键...
6. **CSS3**：作为CSS的最新版本，CSS3提供了更多高级选择器、动画、过渡和模块，如边框半径、多列布局、阴影效果等，增强了网页的设计可能性。 7. **JavaScript**：JavaScript是一种广泛用于网页交互的编程语言，...
1rpx = 0.5px在iPhone6上，这样可以确保元素在不同分辨率的设备上按比例缩放。 3. **动态计算样式**：在某些复杂场景下，可能需要通过JavaScript动态计算图片的宽高，确保其自适应显示。 二、富文本解析 富文本...
在移动端开发过程中，适配策略的选择应当综合考虑项目需求、目标用户的设备分布以及开发维护成本等因素。适配的核心在于通过相对单位和灵活的布局方式，实现内容在各种屏幕尺寸上的合理展示，从而提供优质的用户体验...
6. **CSS3选择器**：CSS3引入了许多新的选择器，如`nth-child()`、`nth-of-type()`等，它们可以帮助我们更精确地选中和样式化元素，使得代码更简洁，效率更高。 7. **兼容性**：尽管现代浏览器对CSS3的支持已经很好...
随着 Flexbox 和 Grid 模型的普及，以及 CSS Houdini 等新特性的出现，开发者可以尝试使用 CSS 自适应布局方法，如 CSS Grid 或者 CSS Container Queries，它们提供了更强大的布局控制，且不需要额外的 JavaScript ...
一般现代设计图都是按照iPhone6/iPhone6s来设计的，iPhone6/iPhone6s的屏幕尺寸是375像素的宽，而设计图是它双倍的大小也就是750px, 因为我对移动端不太熟悉，所以调试rem的时候比较麻烦，也不知道怎么给适配，所以...
1vw等于屏幕宽度的1%，因此，如果设备屏幕宽度为375px（如iPhone 6/7/8），1vw等于3.75px。开发者可以利用vw单位为元素动态设置宽度，确保元素尺寸与屏幕宽度成比例。 2. **rem单位**： - `rem` 是 "root em" 的...
例如，移动设备的用户代理通常会包含"Mobile"、"Android"、"iPhone"、"iPad"等关键词，而桌面设备则会有"Windows NT"、"Macintosh"等标识。 2. **媒体查询（Media Queries）**：CSS3引入的媒体查询是一种更推荐的...
在这个模版中，CSS用于定义字体、颜色、布局、背景、边距等视觉元素，使得整个网店模版呈现出iPhone的商务风格，包括黑色主题和圆弧设计。 3. **JavaScript (JS)**：JavaScript是一种客户端脚本语言，用于实现网页...
如果我们简单地按照视觉稿的像素值来设置元素样式，如将黄色区块设为351x150像素，那么在iPhone 6上看起来会与视觉稿一致，但在iPhone 6 Plus上就会出现比例失调的问题。 为了解决这个问题，我们可以采用Rem布局...
该模版采用了响应式布局，确保在不同尺寸的手机设备上都能良好显示，无论是iPhone、Android还是其他小屏设备，用户都能享受到一致的浏览体验。这主要依赖于CSS3的媒体查询（Media Queries）技术，通过设置不同断点...
从上面的分析可以看出，meta标签的使用可以使原本的iPhone 6按照css-width相同的像素比为1的手机一样正常显示，像素比更高的手机也能正常显示。这意味着，开发者可以不管手机的像素比，只需按照css像素编写代码即可...
移动模板以iPhone6（375 * 667）一倍设计稿为基准，划分十份设置rem，即1rem = 37.5px，高度兼顾自适应，其他按比例转换。配置文件和CSS变量相关的配置src/styles/var.lesssrc/styles/vant-var.less以上两个文件修改...