自适应手机屏幕的css样式 怎么写 改添加在哪里?

如题所述

不是随便添加句话就可以自适应手机屏幕的,没这么简单。如果要自适应手机,是要用到rem单位的,然而rem又要搭配媒体查询来使用。
例如你的设计稿如果是宽720px的话,那你的文字就要以原始大小除以11.25,例如16px的话就要16/11.25这样来计算。我的意思是不用像素,用rem,因为px是写死的,rem是可以适应手机端的(包括盒子的宽高都是要以rem来计算)。另外,用之前要把下面这段代码放到你css文件里:
@media only screen and (max-width: 1080px) {
html, body {
font-size: 16.875px;
}
}

@media only screen and (max-width: 960px) {
html, body {
font-size: 15px;
}
}

@media only screen and (max-width: 800px) {
html, body {
font-size: 12.5px;
}
}

@media only screen and (max-width: 720px) {
html, body {
font-size: 11.25px;
}
}

@media only screen and (max-width: 640px) {
html, body {
font-size: 10px;
}
}
如果宽是720,就除以它相对应的那个值,如果是宽960,就除以960相对应的那个值,这么说应该可以明白吧。
纯手打,望采纳~
温馨提示:内容为网友见解,仅供参考
第1个回答  2017-05-27
把你table标签上面的width的值改成 100% 不就好了?

有没有懂Html5自适应手机的大神
头部要加的是这个,放在标签里,这是初始化手机屏幕的。 你写的这段是要放在所有css样式后边的,以防止样式覆盖。这段的意思是在电脑屏或者其他屏上你显示的是一个样式,通过这个监控屏幕大小,等屏幕大小改变,则替换成另一个样式。media screen and (max-width: 480px) { \/\/设置手机屏宽度不大于...

如何添加CSS让页面自适应手机屏幕
首先,在网页代码的头部,加入一行viewport标签viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。即让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放。其次:网页宽...

怎么修改网站的css让它适应手机端?
1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的标签中,输入meta代码:。3、浏览器运行index.html页面,此时PC端的网页在移动端上也能自动适配。

自适应手机屏幕代码
自适应手机屏幕代码: 首先就是自适应(说白了就是用百分比来设宽度),最外框肯定是用百分比的,但是一些小的部分就不能用百分比了,不然就会变形,就比如你说的图片,图片尽量定死了,不然不同的手机屏幕大小不一定,所显示的就不一样,甚至会变形了。你可以通过控制图片外面的DIV来控制位置,让它在...

怎样让手机版网页自适应手机屏幕宽度
1. **使用``标签**:在HTML文档的``部分添加``。这个`viewport`标签告诉浏览器如何控制页面的尺寸和比例,使得网页能够自适应不同设备的屏幕宽度。`width=device-width`确保网页宽度等于设备屏幕宽度,`initial-scale=1.0`设置初始缩放比例。2. **使用百分比或视窗单位(vw\/vh)**:在CSS中,可以...

怎样让手机版网页自适应手机屏幕宽度?
如果下载下来的图片大小规格完全一样的话,在photoshop中设置一个动作,就能批量处理了。head中加一个meta就行了,。CSS中的百分比中指的是相对于父元素的宽度。子元素的padding-left:50%,父元素的宽度是百,子元素的margin-top:20%,那么父元素的高是百。body默认宽度是屏幕宽度(PC中指的是浏览器宽...

如何制作css手机版?
点击“css”新建一个css样式。6、写样式用".pingmu{}"开始写,给它固定宽高,再添加背景色,让p自适应宽高,超过部分显示滚动条。7、将这个css样式保存到同级目录下,如ceshi.html在c盘,css样式也保存在c盘。8、保存好样式后,双击这个ceshi.html页面,用浏览器打开后看到100像素宽高的黑块。

如何用@media做手机自适应?
宽度不一,写手机、平板对应css时最好用百分比宽度来自适应各种大小不一的屏幕宽度。这个百分比尺寸不算太难但也不是个太轻便的活,如果你css不熟练的话最好先别折腾这块,把基础练好了来。还有,用了css媒体查询后,ie6-8载入不了样式表,要引用个:Respond.js来让ie6-8下正确载入css。js自行百度...

css自适应?
css中margin和padding设置成auto是自适应什么?1、标签比如是块状元素,并且有个确定的宽度,百分比的宽度也行;padding的话,设置成auto它会自动继承浏览器的padding值,因为有些奇葩浏览器是默认有padding值的,为了避免这个对样式造成影响,样式开头一般会加上一句*{margin:0;padding:0};。2、自适应,...

自动换行 css 自适应 宽度不能用固定的,因为必须要适应各类手机,求方 ...
第二种方式:需要你来判断浏览器的或者应该说是手机屏幕的大小,来设置其css样式:如:当然我只是举个例子,其余的样式你可以自己设置,你设置个最大宽度与最小宽度max-width与min-width,一般都是320px--640px手机;media screen and (max-width:360px){body{font-size:12px}} media screen and...

相似回答