‘壹’ 一般移动端页面怎么适配ios页面
1、viewport 简单粗暴的方式:
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
直接设置viewport为320px的1.3倍,将页面放大1.3倍。
为什么是1.3?
目前大部分页面都是以320px为基准的布局,而iphone6的宽度比是375/320 = 1.171875,iphone6+则是 414/320 = 1.29375那么以1.29倍也就约等于1.3了。
2、ip6+ 的CSS media query
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
/*iphone 6*/
}
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
/*iphone 6 plus*/
}
PS: 也可以直接使用实际的device-width:如 device-width : 375px
在原有页面的基础上,再针对相应的屏幕大小单独写样式做适配。
3、REM布局
REM是CSS3新增的一种单位,并且移动端的支持度很高,android2.x+,ios5+ 都支持。REM是相对于dom结构的根元素来设置大小,也就是html这个元素。相较于em单位,rem使用上更容易理解及运用。
REM与PX的换算可以查看网址: https://offroadcode.com/prototypes/rem-calculator/
假设,html我们设置font-size:12px; 也就是说12px相对于1rem,那么18px也就是 18/12 = 1.5rem。
那么我们以320px的设计布局为基准,将html设置为font-size:100px,即100px = 1rem。(设置100px是为了方便计算)那么可以将大部分px单位除以100就可以直接改成rem单位了。
REM如何做响应式布局?
1、如果仅仅是适配ip6+设备,那么使用media query就行。
伪代码如下:
/*320px布局*/
html{font-size: 100px;}
body{font-size: 0.14rem /*实际相当于14px*/}
/* iphone 6 */
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
html{font-size: 117.1875px;}
}
/* iphone6 plus */
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
html{font-size: 129.375px;}
}
这样,在ip6下,也就将页面内的元素放大了1.17倍,ip6+下也就是放大了1.29倍。
2、如果是完全自适应,那么可以通过JS来控制。
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
};
// Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
页面初始化的时候计算font-size,然后再绑定resize事件。这种效果就和百分比布局一样了。
‘贰’ 如何在不使用js和css媒体查询的情况下,适配移动端各种尺寸和比例的屏幕
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,maximum-scale=1, user-scalable=no">
把这句话加到title标签下边 求采纳
‘叁’ 移动前端开发,怎么让页面适应不同的屏幕
头部写上下面代码:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
然后网页宽度一般都用百分比,不要固定死。
再用@media媒体查询
不同大小屏幕要做不同的css样式
附件是一个@media的小例子
缩放浏览器窗口可以查看样式的变化
‘肆’ 怎样低成本的实现网页在移动端的适配
解决方案涉及到的知识点:
viewport
媒体查询(media query)
Javascript window.matchMedia
响应式图片
栅格布局
顶部导航
测试工具
iOS和Android自带的浏览器都是基于webkit内核,所以我们可以使用viewport属性和media
query技术实现网站的响应性。
viewport
在<head>之中添加viewport元数据标签。
width=device-width 实现屏幕适配,页面绘制根据触屏大小变化,保持一致。
initial-scale 表示初始缩放。
Js代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
maximum-scale 表示最大缩放比例,1意味着不能进行缩放。
user-scalable=no
禁用页面缩放(zooming)功能。禁用缩放后,用户只能滚动屏幕,让你的网站看上去更像原生应用。
注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!
Js代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
媒体查询(media
query)
根据不同的分辨率,引用不用的css
Css代码
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />
Bootstrap3的实现 http://v3.bootcss.com/css/#grid-media-queries ,
以下是LESS方法的实现
Js代码
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Javascript window.matchMedia
用CSS3解决的确很方便,但某些场景下仍然需要JS技术。
Js代码
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}
状态改变时监听
Js代码
function setup_for_width(mql) {
if (mql.matches) {
// The screen width is 400px or wider. Set up or change things
// appropriately.
} else {
// The screen width is less than 400px. Set up or change things
// appropriately.
}
}
var width_mql = window.matchMedia("(min-width: 400px)");
// Add a listener for when the result changes
width_mql.addListener(setup_for_width);
// And share the same code to set things up with our current state.
setup_for_width(width_mql);
‘伍’ html页面 自适应pc端 屏幕大小 怎么设置
使用媒体查询,参考bootstrap里面的设置,或者直接使用bootstrap框架吧,根据浏览器的宽度自动设置宽度的
媒体查询代码实例
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
‘陆’ web端适配主流分辨率都有哪些
屏幕分辨率一般是这样的。 然后做响应式的时候,需要考虑的是1024 * 768、768 * 1280、640 * 960、320 * 480的分辨率,其他的都不怎么考虑。 1024 * 768 是一般电脑屏幕分辨率; 768 * 1280是平板横着时的分辨率 640 * 960是平板竖着时的分辨率 ...
‘柒’ 手机web版的页面(html/css)怎么兼容所有浏览器和各个手机屏幕分辨率
你说的这个问题,应该算的上是手机适配的问题!
既然是手机web端页面,这里的尺寸应该指的是浏览器的可视区域!
同样是5寸屏,一些有问题一些木有问题。
那他们的不同点就在于浏览器的可视区域不一样。
针对这类极小部分的适配问题。可以通过。css适配做出适当调整:
//手机浏览器是这个最大区域(可视区域375px)时,应用这个里面的样式
@mediascreenand(max-height:375px)
{
}
//手机浏览器是这个最小区域(可视区域375px)时,应用这个里面的样式
@mediascreenand(mim-height:375px)
{
}
//手机浏览器是这个最大区域(可视区域375px)介于345-75时,应用这个里面的样式
@mediascreenand(mim-height:375px)and(mim-height:775px)
{
}
具体你可以参考这个:
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/
‘捌’ 网页如何自适应屏幕大小,主要是在移动客户端上。
做网站的话.你只要适应1024*768这个分辨率就可以了..
其他的事情不是你来做的..
作为一个网页,一般情况是没有权限知道客户端的具体信息的..如果你不知道屏幕分辨率,又如何自适应?
‘玖’ 移动 WEB 如何适配千奇百怪的分辨率
在移动端存在各式各样的分辨率,移动端网页就会面对很复杂的兼容问题,并非是兼容系统,而是要保证页面在不同分辨率网页当中效果的一致性。
对于这种问题,其实还是比较好解决的,横向采用百分比,就能够实现内容随着设备宽度大小的变化而变化的需求。
比较难解决的问题是纵向上的高度问题,相信你也使用过百分比去尝试解决,但是如果高度采用百分比,盒模型中padding、margin等属性的计算方式有些特殊,这也就导致纵向不能够使用百分比。(对于这方面如果希望了解,可以在一个叫“HTML5学堂”的网站当中查看,里面有非常详细和清晰的讲解,在此我就不再重复书写了)
这样的现状就导致纵向需要使用其他单位来解决,于是就会使用到CSS3当中一个新的单位,rem。
rem是一个相对度量单位,是针对html标签的字体大小来计算的。如果html标签的字体大小为16px,那么1rem就是16px,如果html标签的字体大小是20px,那么1rem就是20px。
横向使用百分比,纵向使用rem,之后用JS去获取当前设备宽度,并根据设备宽度、设计图宽度、设计图基准字体大小,通过JS计算出当前设备下html文件的font-size(基准字体大小),就是适配移动端各个分辨率设备的方法。
给出JS代码作为参考,不过,这个JS是基于JQ的:
这个里面设计图是640的,设计图中最小字体是24像素。所以,当你进行开发时,如上这段代码当中的几个数字,也要根据设计图的具体值而调整。