...了<meta name="viewport"content="width=device-width, initial-sca...
发布网友
发布时间：2024-10-06 06:42
共3个回答
热心网友
时间：2024-11-09 05:12
手机页面的话html的头部最好先加上<meta name="viewport" content="width=device-width, initial-scale=1.0
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>这种标签，表示是根据手机屏幕1:1显示的页面。
这种情况需要用百分比来编写样式的宽度大小或者用JS判断根据不同的屏幕分辨率来编写不同的样式大小，这样才能确保你的样式能正确的占满全屏。
设定数值的单位最好用em或rem这种相对单位来设定，这样可以适应不同分辨率的字体大小显示，这样设置的缺点是数值设定有些模糊，不够精准，不能百分百保证所有分辨率页面显示效果完全一致；优点是不必麻烦的根据不同分辨率去写不同大小的样式。
网页是一个文件，通常是HTML格式（文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页通常要透过网页浏览器来阅读。根据W3C对于WEB PAGE的定义，网页是一个信息的集合，其内容包含一个或多个网络资源的信息，同时预期使其成为单一个URI。进一步说，一个网页其包含一个或多个嵌入于网页中的网络资源使其成为单一个URI档案(HTML)，而该URI并不再嵌入于其他档案之中。网页是构成网站的基本元素，是承载各种网站应用的平台。
热心网友
时间：2024-11-09 05:09
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
估计是本身页面尺寸就是那么大吧【本人还没开始接触手机WEB前端，请恕我见识短浅
热心网友
时间：2024-11-09 05:07
刚接触手机样式布局时的回答（2013年中旬）：
手机页面的话html的头部最好先加上<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>这种标签，表示是根据手机屏幕1:1显示的页面，上面的兄弟把这个标签的一些属性已经说得很明白了。
这种情况需要用百分比来编写样式的宽度大小或者用JS判断根据不同的屏幕分辨率来编写不同的样式大小，这样才能确保你的样式能正确的占满全屏。
设定数值的单位最好用em或rem这种相对单位来设定，这样可以适应不同分辨率的字体大小显示，这样设置的缺点是数值设定有些模糊，不够精准，不能百分百保证所有分辨率页面显示效果完全一致；优点是不必麻烦的根据不同分辨率去写不同大小的样式。
当然个人认为最保险且执行效率最高的是用css媒体查询来判断不同的页面分辨率从而调用不同的样式，这是横竖屏适应最强、分辨率适应最好且执行效率最快的方法，不过也有三个缺点：1、编写麻烦，需要根据不同分辨率编写不同样式（这是最大的缺点，增加了页面编写者的工作量）；2、增加了css文件的大小（当然css文件还是挺小的，大小增加也不会很夸张）；3、不一定适用于ie6浏览器，当然手机项目中这个问题可以直接忽略掉。
---------------------------------------------------------------------------------------------
最近（2015年初）做网页版手机应用，新总结出了一点手机页面的书写心得，这里进行分享：
由于手机的浏览器版本普遍较新，所以对CSS3的支持比较好，因此书写手机页面时单位最好采用CSS3的新单位rem，这样所有地方的大小都是按照一个统一的基数来定义啦，这也是它跟相对单位em的区别，比如网页默认的em和rem大小一般是16像素，通过html{font-size:62.5%;}这样的重定义可以把大小默认设置为12像素，但是这里就有一个问题，就是em的大小会根据其父级元素的字体大小改变而改变，书写的时候总是要去注意这一点，但是rem不会有这个问题，因为它的大小是根据根元素（即html和body标签）而定的，大小只随着根元素的字体大小来改变，因此没有em所带来的隐患。
用rem为单位写出来的页面还有一个好处，就是适应不同分辨率时十分简单，只需要通过css媒体查询改变rem的默认值即可达到适应不同分辨率的目的，十分方便省事。
---------------------------------------------------------------------------------------------
偶然间又看到了这个自己曾经的回答，现在打算再更新一下自己对于移动端的样式布局的心得（2017年2月底）：
方法一（这是2016年在知乎上看到的别人写的东西，适用于完全自定义写手机样式）：
1. 用js计算当前网页宽度（px），然后假设设计稿是320px宽,则除以3.2，得到的数字设置成 html 标签的font-size。
2. 某个元素在设计稿上的宽度，除以100，就设置成css的rem单位。
比如某个按钮宽度在设计稿上是 100px。 那么css里面就写 width:1rem;
3. 如果你css里面所有的单位都是rem。那么无论当前浏览器是什么尺寸， 网页看起来都像是基于320的设计稿放大缩小一样。
/////////////////////////////////////////
方法二：
使用bootstrap这种响应式的布局框架，在它现有布局的基础上自定义自己的页面样式。
/////////////////////////////////////////
方法三：
如果你的项目不追求样式的自定义化的话，也可以使用WeUI之类的现成的移动端样式库，即简单方便，又效果甚佳。
/////////////////////////////////////////
方法四：（个人不推荐这种做法）
也可以使用js动态计算zoom值，然后赋给body。
function zoom(){
var zoom = $(window).width() / 1080;
$("body").css("zoom", zoom).show();
}
zoom();
window.onresize = zoom();
/////////////////////////////////////////
如果希望前端结构清晰漂亮且智能一些，推荐写样式时候用sass/less这种样式预编译工具，然后配合webpack/gulp/grunt/fis之类的构建工具（确切的说webpack跟后三者不太一样，功能更加全面，且加入模块化概念，更像是一套完善的解决方案，如果没有过多的技术需求，用后三者足够了），来智能方便且清晰地构建自己的前端样式结构。
