在h5中iphone4用媒体查询 iphone怎么解决

来源：蜘蛛抓取(WebSpider) 时间：2016-08-14 07:42 标签： 解决ie8兼容媒体查询
一、什么是响应式 随着移动端越来遇火 网站的布局成为一个热议的话题
有的人喜欢用手机浏览网站、有的人喜欢用paid浏览网站、有人喜欢用电脑浏览网站 那么问题来了 我们怎么样才能使用一套css样式 完成三种终端的适配呢 万维组织(W3c)朝思暮想 终于提出了一种可以兼容各个终端的页面布局样式语法
交给浏览器判断试用用户终端的宽度、高度、像素密度等等从而达到屏幕有多宽页面就有多宽字体大小不会受终端影响页面布局不会错乱掉这就是响应式二、media响应式的罪魁祸首 --
被我发现了 1)、点开有道词典或者百度翻译 输入media 译文一栏 赤裸裸的显示着&媒体&两个字 于是乎 media的中文意思是媒体我们又用它来查询终端的设备信息 故赐名&媒体查询&..... &正所谓媒体查询 查询设备信息 那一定不只是屏幕宽的问题了 所以我们扒开它的外衣一探究竟media可查询的设备信息和工作原理都有什么& 2)、media的写法&&兼容性&&支持查询设备的信息有哪些当media出现在我们的link标签中或是css样式表中我们的终端设备一解析 心里 捉摸着主人(开发程序员)这是要闹那样 打算给这个网站穿上什么外衣 我该怎么执行呢于是 media就需要进行进一步判断 看看我身后的关键字是什么 如果是screen 判断屏幕浏览器 如果是all 那就是用于所有设备了额 media支持的设备信息属性详情参见网址&/cssref/css3-pr-mediaquery.html 特别注意 media 也可以用于 link标签中判断信息成立加载响应的css文件 说到这不得不说说 &meta name='viewport'
content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'/&这货的作用 老办法打开有道 输入viewport 经翻译 是视窗的意思 所以是我猜他是浏览器的视窗的意思 device-width是设备宽度的意思 如果想查询高度 height=device-height、initial-scale是初始化页面大小的意思maximum-scale是最大的视图的意思user-scalable是用户是否可以进行缩放 这样一来一个响应式网站视觉原理就在这种情况下完成了&当然内行看门道外行看热闹 想要更快更好的实现响应式网站的实现内部的css还是大有研究的比如 width:100%; 会和父容器的宽度相一致只要视口大小作调整 宽度被设置为100%的子元素就会做出相应的改变后来万维党H5小组合伙研究者咱们出一个新属性吧让他的width:100%;变得更强大，哥几个一拍巴掌合计着成就这样flex(伸缩盒)也横空出世了&三、flex的使用规则& flex 中文翻译过来是伸缩盒子的意思 主要应用在响应式网站布局上面是响应式布局变的简单&&3.1）flex使用规则& 设置父元素为display:如果想设置元素的排列方向呢是自上而下还是自下而上呢是从左到右呢还是从右至左呢只需要设置属性flex-direction:row|colflex-flow:&flex-direction&flex-wrap|initial| &若我表述的不是很清楚请看文章&/cssref/css3-pr-flex-flow.html 阮大叔的&/blog/2015/07/flex-grammar.html 文章 &还有css88的 &/book/css/properties/flexible-box/index.htm　　　　　　&/book/css/properties/flex/index.htm就不信整不会你。。。。。&最后让我再说说这个移动端像素单位 em rem 的区别em:取值不固定会继承父元素的大小进行改变rem:取值不固定按照html，body元素大小进行改变想要统一字体大小 html或body元素css样式设置字体大小成62.5% 空口无凭 贴图证明 如下图&另附：em rem px 在线字体换算网址 /
" href="/web/html-css/266.shtml" target="_blank">&&HTML5从入门到精通&&
最新教程周点击榜
微信扫一扫问题： (html)移动端的rem是必须和媒体查询配合使用嘛？
描述:移动端的rem是必须和媒体查询配合使用嘛？不同分辩率利用媒体查询来设置字体大小，我看有的帖子用了，有的帖子没用。谢谢！解决方案1:楼主，我也刚开始研究这方面，你可以看看这文章，看明白就知道怎么回事了！移动端高清、多屏适配方案从网易与淘宝的font-size思考前端设计稿与工作流 解决方案2:不是必须的。可以给根节点设置字体大小：html {
font-size: 10
}根节点字体大小是屏幕宽度的 1/10 ，然后使用 rem。ps：根节点字体大小到底设置多少个 vw。。。看个人习惯吧。。。解决方案3:先用js动态计算字体 &script type="text/javascript"&
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientW
if (!clientWidth)
docEl.style.fontSize = (clientWidth &= 640 ? 100 : clientWidth / 6.4) + 'px';
if (!doc.addEventListener)
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
&/script&然后使用rem单位解决方案4:首先，没有什么必须的方案，只有最适合的。不过rem+媒体流查询算是一个比较成熟的方案，我们在动态计算html的fant-szie
CSS采用rem大部分的适配连媒体流都可以不使用。你可以参考一下淘宝的解决方案。
现在比较成熟的解决方案一种是网易的那种，或者淘宝的。（转载）这是我在另一个问题下发的答案，希望有所帮助，手机转载不便见谅【设计稿上的px,落实到前端开发的话，字体大小该设多少？】如果一张设计稿是640x1136,设计稿里的字体大小分别是18px,24px,33px。那么落实到前端写代码的时候，应该用多少px呢?如果用18px,24px,33px的话，在手机上看，会显得很大额。 -- 分享自SegmentFault 原文链接:/q/10...看起来是 iPhone 5 的分辨率，那么需要一次逻辑分辨率的转换。iPhone 5 的逻辑分辨率为 320 X 568，所以如果需要像素级还原，需要将设计的设计稿缩放为 320 X 568，然后再按照缩放后的尺寸进行开发，可以直接写像素尺寸。如果不想在样式表中用像素的话，比如用 rem，那么只需要在样式表预处理语言中定义一个 $rootFontSize，然后将 $rootFontSize 设置在 html 标签上，之后所有的尺寸都可以使用 (逻辑分辨率设计稿上的尺寸 / $rootFontSize)rem，一般通过定义一个函数进行，比如：$rootFontSize = 12pxsize(px)
(px / $rootFontSize)rem
上一篇： 下一篇：

我要回帖

更多关于 解决ie8兼容媒体查询 的文章

 

随机推荐