H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
viewport标签极其属性:
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
每个属性的详细介绍:
属性名 | 取值 | 描述 |
---|---|---|
width | 正整数 或 device-width | 定义视口的宽度,单位为像素 |
height | 正整数 或 device-height | 定义视口的高度,单位为像素,一般不用 |
initial-scale | [0.0-10.0] | 定义初始缩放值 |
minimum-scale | [0.0-10.0] | 定义缩小最小比例,它必须小于或等于maximum-scale设置 |
maximum-scale | [0.0-10.0] | 定义放大最大比例,它必须大于或等于minimum-scale设置 |
user-scalable | yes/no | 定义是否允许用户手动缩放页面,默认值yes |
2、使用css3单位rem
rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:
p {font-size:14px; font-size:.875rem;}
默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。
通常情况下,为了便于计算数值则使用62.5%,即默认的10px作为基数。当然这个基数可以为任何数值,视具体情况而定。设置方法如下:
Html{font-size:62.5%(10/16*100%)}
具体不同屏幕下的规则定义,即基数的定义方式:可以通过CSS定义,不同宽度范围里定义不同的基数值,当然也可以通过js一次定义方法如下:
<script type="text/javascript"> (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 = 20 * (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化 }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>
3、使用媒体查询
媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生。
媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等。
例如:如果浏览器窗口小于 500px, 背景将变为浅蓝色:
@media only screen and (max-width: 500px) { body { background-color: lightblue; } }
4、使用百分比
百分比指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是100%;
所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。
以上就是自适应网站建设的一些大概的方法对程序有兴趣的看官可以自己实践一下试试,说完了这个接下来小编和大家说说关于中英双语网站得到一些建议分析,主要从服务器、域名、编码这三个方面
一,双语网站服务器
1、国外用户打开国内服务器上的网站速度特别慢
如果你的外贸网站是放在国内的服务器上,你的大部分国外潜在客户在打开你的网站的时候,会超级的慢。就像你在国内去打开国外的网站一样,很多时候慢的你无法忍受。试想,你从电信打开网通时有时候还受不了,何况老外远隔重洋来访问你的网站呢?如果你的国外潜在客户打开你的网站之后,10秒钟还没有打开你的网页,它可能立刻就会把你的网站关闭掉,去看你的竞争对手的网站。
宽带普及之后很少有人考虑网站速度的问题,可国内国外之间的阻隔,往往比你想想的要大很多!
二,域名选择
1、域名简短容易拼写记忆。
2、针对欧美市场尽量使用.COM,这样会让你的公司显得比较正规。
3、比较重要的一点就是包含关键词,如你想要注册的包含关键词的域名被注掉了,可以试试在关键词之间加中划线,这样的域名可能效果更好。
三,编码问题
做英文站首先要把如下代码更改成英文编码,不然英文搜索引擎不会收录你的站点。gb2312代表简体中文,需改为“UTF-8”或者“ISO-8859-1”。“UTF-8”涵盖的字符范围最广,推荐使用。
说完了这个就是大家最关心的价格问题了,简单来说卖家和买家在价格上面其实大家要明白卖家希望以高价成交,买家则希望较低的价格成交,从而使真实的价格变得很模糊,需要我们自身有一定的专业知识,所以小编的建议在价格上面最好有专业的人士能够系统的评估以及对方的客户案例和自身实力也是我们评判的标准,不要贪便宜也不要吃大亏就好了。感谢您的阅读以上就是【久团网】中英双语自适应网站价格分析的全部内容了,感谢您的阅读希望可以帮助到你。
2018-11-20
2018-11-18
2018-11-17
2020-06-28
2020-06-28
2018-09-26